Hugging Face's logo

Spaces:
reza-gh
/
proposalcraft-pro-wizard
Running

App Files Community
reza-gh commited on
Commit
28c0b6b
·
verified ·
1 Parent(s): 39b7dc5

ADD MULTI OTHER SECTION...

Browse files
Files changed (8) hide show
  1. README.md +8 -5
  2. components/footer.js +127 -0
  3. components/navbar.js +81 -0
  4. create.html +241 -0
  5. index.html +80 -19
  6. my-proposals.html +124 -0
  7. script.js +35 -0
  8. style.css +25 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Proposalcraft Pro Wizard
3
- emoji: 🏆
4
- colorFrom: indigo
5
- colorTo: purple
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: ProposalCraft Pro Wizard 🧙‍♂️
3
+ colorFrom: yellow
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,127 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ background: #1e293b;
8
+ color: white;
9
+ padding: 4rem 2rem;
10
+ }
11
+ .container {
12
+ max-width: 1200px;
13
+ margin: 0 auto;
14
+ display: grid;
15
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
16
+ gap: 2rem;
17
+ }
18
+ .logo {
19
+ font-size: 1.5rem;
20
+ font-weight: 700;
21
+ color: #a78bfa;
22
+ margin-bottom: 1rem;
23
+ display: flex;
24
+ align-items: center;
25
+ gap: 0.5rem;
26
+ }
27
+ .links h3 {
28
+ font-size: 1.125rem;
29
+ font-weight: 600;
30
+ margin-bottom: 1rem;
31
+ }
32
+ .links ul {
33
+ list-style: none;
34
+ padding: 0;
35
+ margin: 0;
36
+ }
37
+ .links li {
38
+ margin-bottom: 0.5rem;
39
+ }
40
+ .links a {
41
+ color: #e2e8f0;
42
+ text-decoration: none;
43
+ transition: color 0.2s;
44
+ }
45
+ .links a:hover {
46
+ color: #a78bfa;
47
+ }
48
+ .social-links {
49
+ display: flex;
50
+ gap: 1rem;
51
+ margin-top: 1rem;
52
+ }
53
+ .social-links a {
54
+ color: white;
55
+ background: #334155;
56
+ width: 2.5rem;
57
+ height: 2.5rem;
58
+ border-radius: 50%;
59
+ display: flex;
60
+ align-items: center;
61
+ justify-content: center;
62
+ transition: all 0.2s;
63
+ }
64
+ .social-links a:hover {
65
+ background: #7c3aed;
66
+ transform: translateY(-2px);
67
+ }
68
+ .copyright {
69
+ grid-column: 1 / -1;
70
+ text-align: center;
71
+ margin-top: 3rem;
72
+ padding-top: 2rem;
73
+ border-top: 1px solid #334155;
74
+ color: #94a3b8;
75
+ }
76
+ </style>
77
+ <footer>
78
+ <div class="container">
79
+ <div class="footer-col">
80
+ <div class="logo">
81
+ <i data-feather="edit-3"></i>
82
+ ProposalCraft
83
+ </div>
84
+ <p>Magical tools for professional proposals.</p>
85
+ <div class="social-links">
86
+ <a href="#"><i data-feather="twitter"></i></a>
87
+ <a href="#"><i data-feather="linkedin"></i></a>
88
+ <a href="#"><i data-feather="facebook"></i></a>
89
+ <a href="#"><i data-feather="github"></i></a>
90
+ </div>
91
+ </div>
92
+ <div class="links">
93
+ <h3>Product</h3>
94
+ <ul>
95
+ <li><a href="/features.html">Features</a></li>
96
+ <li><a href="/pricing.html">Pricing</a></li>
97
+ <li><a href="/templates.html">Templates</a></li>
98
+ <li><a href="/updates.html">Updates</a></li>
99
+ </ul>
100
+ </div>
101
+ <div class="links">
102
+ <h3>Company</h3>
103
+ <ul>
104
+ <li><a href="/about.html">About</a></li>
105
+ <li><a href="/careers.html">Careers</a></li>
106
+ <li><a href="/blog.html">Blog</a></li>
107
+ <li><a href="/press.html">Press</a></li>
108
+ </ul>
109
+ </div>
110
+ <div class="links">
111
+ <h3>Resources</h3>
112
+ <ul>
113
+ <li><a href="/help.html">Help Center</a></li>
114
+ <li><a href="/tutorials.html">Tutorials</a></li>
115
+ <li><a href="/webinars.html">Webinars</a></li>
116
+ <li><a href="/contact.html">Contact</a></li>
117
+ </ul>
118
+ </div>
119
+ <div class="copyright">
120
+ &copy; ${new Date().getFullYear()} ProposalCraft. All rights reserved.
121
+ </div>
122
+ </div>
123
+ </footer>
124
+ `;
125
+ }
126
+ }
127
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,81 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ background: white;
8
+ padding: 1rem 2rem;
9
+ display: flex;
10
+ justify-content: space-between;
11
+ align-items: center;
12
+ box-shadow: 0 2px 10px rgba(0,0,0,0.05);
13
+ position: fixed;
14
+ width: 100%;
15
+ top: 0;
16
+ z-index: 1000;
17
+ }
18
+ .logo {
19
+ color: #7c3aed;
20
+ font-weight: 700;
21
+ font-size: 1.5rem;
22
+ display: flex;
23
+ align-items: center;
24
+ gap: 0.5rem;
25
+ }
26
+ ul {
27
+ display: flex;
28
+ gap: 2rem;
29
+ list-style: none;
30
+ margin: 0;
31
+ padding: 0;
32
+ align-items: center;
33
+ }
34
+ a {
35
+ color: #4b5563;
36
+ text-decoration: none;
37
+ transition: color 0.2s;
38
+ font-weight: 500;
39
+ display: flex;
40
+ align-items: center;
41
+ gap: 0.25rem;
42
+ }
43
+ a:hover {
44
+ color: #7c3aed;
45
+ }
46
+ .cta {
47
+ background: #7c3aed;
48
+ color: white;
49
+ padding: 0.5rem 1.25rem;
50
+ border-radius: 0.375rem;
51
+ }
52
+ .cta:hover {
53
+ background: #6d28d9;
54
+ color: white;
55
+ }
56
+ @media (max-width: 768px) {
57
+ ul {
58
+ display: none;
59
+ }
60
+ .mobile-menu-btn {
61
+ display: block;
62
+ }
63
+ }
64
+ </style>
65
+ <nav>
66
+ <a href="/" class="logo">
67
+ <i data-feather="edit-3"></i>
68
+ ProposalCraft
69
+ </a>
70
+ <ul>
71
+ <li><a href="/features.html"><i data-feather="zap"></i> Features</a></li>
72
+ <li><a href="/templates.html"><i data-feather="layout"></i> Templates</a></li>
73
+ <li><a href="/pricing.html"><i data-feather="dollar-sign"></i> Pricing</a></li>
74
+ <li><a href="/create.html" class="cta"><i data-feather="plus"></i> New Proposal</a></li>
75
+ <li><a href="/my-proposals.html"><i data-feather="folder"></i> My Proposals</a></li>
76
+ </ul>
77
+ </nav>
78
+ `;
79
+ }
80
+ }
81
+ customElements.define('custom-navbar', CustomNavbar);
create.html ADDED
@@ -0,0 +1,241 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Create New Proposal | ProposalCraft</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-gray-50">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <div class="container mx-auto px-4 py-12 max-w-6xl">
16
+ <div class="flex items-center justify-between mb-8">
17
+ <h1 class="text-3xl font-bold text-gray-800">Create New Proposal</h1>
18
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg font-medium flex items-center gap-2">
19
+ <i data-feather="save"></i> Save Draft
20
+ </button>
21
+ </div>
22
+
23
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
24
+ <div class="grid md:grid-cols-4">
25
+ <!-- Sidebar -->
26
+ <div class="bg-gray-50 p-6 border-r border-gray-200">
27
+ <div class="mb-6">
28
+ <h2 class="font-medium text-gray-500 mb-2">PROPOSAL TYPE</h2>
29
+ <select class="w-full p-2 border border-gray-300 rounded-md">
30
+ <option>Business Proposal</option>
31
+ <option>Project Proposal</option>
32
+ <option>Grant Proposal</option>
33
+ <option>Research Proposal</option>
34
+ <option>Sales Proposal</option>
35
+ </select>
36
+ </div>
37
+
38
+ <div class="mb-6">
39
+ <h2 class="font-medium text-gray-500 mb-2">TEMPLATE</h2>
40
+ <div class="grid grid-cols-2 gap-2">
41
+ <div class="cursor-pointer border-2 border-transparent hover:border-purple-500 rounded-md overflow-hidden">
42
+ <img src="http://static.photos/technology/320x240/1" alt="Template" class="w-full h-auto">
43
+ </div>
44
+ <div class="cursor-pointer border-2 border-transparent hover:border-purple-500 rounded-md overflow-hidden">
45
+ <img src="http://static.photos/technology/320x240/2" alt="Template" class="w-full h-auto">
46
+ </div>
47
+ <div class="cursor-pointer border-2 border-transparent hover:border-purple-500 rounded-md overflow-hidden">
48
+ <img src="http://static.photos/technology/320x240/3" alt="Template" class="w-full h-auto">
49
+ </div>
50
+ <div class="cursor-pointer border-2 border-transparent hover:border-purple-500 rounded-md overflow-hidden">
51
+ <img src="http://static.photos/technology/320x240/4" alt="Template" class="w-full h-auto">
52
+ </div>
53
+ </div>
54
+ <button class="mt-2 text-purple-600 text-sm font-medium flex items-center gap-1">
55
+ <i data-feather="plus" class="w-4 h-4"></i> Browse More
56
+ </button>
57
+ </div>
58
+
59
+ <div>
60
+ <h2 class="font-medium text-gray-500 mb-2">SECTIONS</h2>
61
+ <ul class="space-y-2">
62
+ <li class="flex items-center gap-2 text-gray-700">
63
+ <i data-feather="file-text" class="w-4 h-4 text-purple-500"></i>
64
+ <span>Cover Page</span>
65
+ </li>
66
+ <li class="flex items-center gap-2 text-gray-700">
67
+ <i data-feather="users" class="w-4 h-4 text-blue-500"></i>
68
+ <span>Executive Summary</span>
69
+ </li>
70
+ <li class="flex items-center gap-2 text-gray-700">
71
+ <i data-feather="target" class="w-4 h-4 text-green-500"></i>
72
+ <span>Objectives</span>
73
+ </li>
74
+ <li class="flex items-center gap-2 text-gray-700">
75
+ <i data-feather="dollar-sign" class="w-4 h-4 text-yellow-500"></i>
76
+ <span>Budget</span>
77
+ </li>
78
+ <li class="flex items-center gap-2 text-gray-700">
79
+ <i data-feather="clock" class="w-4 h-4 text-red-500"></i>
80
+ <span>Timeline</span>
81
+ </li>
82
+ </ul>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Main Editor -->
87
+ <div class="md:col-span-3 p-8">
88
+ <div class="mb-8">
89
+ <input type="text" placeholder="Proposal Title" class="text-3xl font-bold w-full border-none focus:ring-0 p-0">
90
+ <div class="flex items-center gap-4 mt-2">
91
+ <div class="flex items-center gap-2 text-gray-500">
92
+ <i data-feather="calendar" class="w-4 h-4"></i>
93
+ <span>Created: ${new Date().toLocaleDateString()}</span>
94
+ </div>
95
+ <div class="flex items-center gap-2 text-gray-500">
96
+ <i data-feather="user" class="w-4 h-4"></i>
97
+ <span>Author: You</span>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <div class="prose max-w-none">
103
+ <div class="mb-8">
104
+ <h3 class="text-xl font-semibold mb-4">Executive Summary</h3>
105
+ <textarea class="w-full p-4 border border-gray-300 rounded-md min-h-[200px]" placeholder="Write a compelling summary that highlights the key points of your proposal..."></textarea>
106
+ </div>
107
+
108
+ <div class="mb-8">
109
+ <h3 class="text-xl font-semibold mb-4">Project Objectives</h3>
110
+ <textarea class="w-full p-4 border border-gray-300 rounded-md min-h-[200px]" placeholder="Clearly define what you aim to achieve with this project..."></textarea>
111
+ </div>
112
+
113
+ <div class="mb-8">
114
+ <h3 class="text-xl font-semibold mb-4">Budget Breakdown</h3>
115
+ <div class="overflow-x-auto">
116
+ <table class="min-w-full border">
117
+ <thead>
118
+ <tr class="bg-gray-100">
119
+ <th class="p-3 text-left">Item</th>
120
+ <th class="p-3 text-left">Description</th>
121
+ <th class="p-3 text-left">Cost</th>
122
+ </tr>
123
+ </thead>
124
+ <tbody>
125
+ <tr class="border-t">
126
+ <td class="p-3"><input type="text" class="border-none w-full" placeholder="Item 1"></td>
127
+ <td class="p-3"><input type="text" class="border-none w-full" placeholder="Description"></td>
128
+ <td class="p-3"><input type="text" class="border-none w-full" placeholder="$0.00"></td>
129
+ </tr>
130
+ <tr class="border-t">
131
+ <td class="p-3"><button class="text-purple-600 flex items-center gap-1"><i data-feather="plus" class="w-4 h-4"></i> Add Item</button></td>
132
+ <td class="p-3"></td>
133
+ <td class="p-3"></td>
134
+ </tr>
135
+ </tbody>
136
+ </table>
137
+ </div>
138
+ </div>
139
+ <div class="mb-8">
140
+ <h3 class="text-xl font-semibold mb-4">Methodology</h3>
141
+ <textarea class="w-full p-4 border border-gray-300 rounded-md min-h-[200px]" placeholder="Describe your approach and methods for completing the project..."></textarea>
142
+ </div>
143
+
144
+ <div class="mb-8">
145
+ <h3 class="text-xl font-semibold mb-4">Timeline</h3>
146
+ <div class="space-y-4">
147
+ <div class="flex items-start gap-4">
148
+ <div class="bg-purple-100 p-2 rounded-lg">
149
+ <i data-feather="calendar" class="text-purple-600"></i>
150
+ </div>
151
+ <div class="flex-1">
152
+ <input type="text" class="font-medium border-none w-full" placeholder="Phase 1 Title">
153
+ <input type="text" class="text-sm text-gray-500 w-full mt-1 border-none" placeholder="Start Date - End Date">
154
+ <textarea class="w-full p-3 border border-gray-300 rounded-md mt-2 min-h-[80px]" placeholder="Phase description..."></textarea>
155
+ </div>
156
+ </div>
157
+ <button class="text-purple-600 flex items-center gap-1 mt-2">
158
+ <i data-feather="plus" class="w-4 h-4"></i> Add Another Phase
159
+ </button>
160
+ </div>
161
+ </div>
162
+
163
+ <div class="mb-8">
164
+ <h3 class="text-xl font-semibold mb-4">Team</h3>
165
+ <div class="grid md:grid-cols-2 gap-4">
166
+ <div class="border rounded-lg p-4">
167
+ <div class="flex items-center gap-4">
168
+ <img src="http://static.photos/people/100x100/1" alt="Team member" class="w-12 h-12 rounded-full">
169
+ <div>
170
+ <input type="text" class="font-medium border-none w-full" placeholder="Name">
171
+ <input type="text" class="text-sm text-gray-500 w-full mt-1 border-none" placeholder="Role">
172
+ </div>
173
+ </div>
174
+ <textarea class="w-full p-3 border border-gray-300 rounded-md mt-3 min-h-[80px]" placeholder="Bio/Experience..."></textarea>
175
+ </div>
176
+ <div class="border rounded-lg p-4">
177
+ <div class="flex items-center gap-4">
178
+ <img src="http://static.photos/people/100x100/2" alt="Team member" class="w-12 h-12 rounded-full">
179
+ <div>
180
+ <input type="text" class="font-medium border-none w-full" placeholder="Name">
181
+ <input type="text" class="text-sm text-gray-500 w-full mt-1 border-none" placeholder="Role">
182
+ </div>
183
+ </div>
184
+ <textarea class="w-full p-3 border border-gray-300 rounded-md mt-3 min-h-[80px]" placeholder="Bio/Experience..."></textarea>
185
+ </div>
186
+ </div>
187
+ <button class="text-purple-600 flex items-center gap-1 mt-4">
188
+ <i data-feather="plus" class="w-4 h-4"></i> Add Team Member
189
+ </button>
190
+ </div>
191
+
192
+ <div class="mb-8">
193
+ <h3 class="text-xl font-semibold mb-4">Appendices</h3>
194
+ <div class="border rounded-lg p-4">
195
+ <div class="flex items-center gap-4 mb-4">
196
+ <div class="bg-gray-100 p-3 rounded-lg">
197
+ <i data-feather="file" class="text-gray-600"></i>
198
+ </div>
199
+ <div class="flex-1">
200
+ <input type="text" class="font-medium border-none w-full" placeholder="Document Title">
201
+ <div class="flex gap-2 mt-2">
202
+ <button class="text-sm text-gray-600 border px-3 py-1 rounded-md">Upload File</button>
203
+ <button class="text-sm text-gray-600 border px-3 py-1 rounded-md">Link Document</button>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ <button class="text-purple-600 flex items-center gap-1">
208
+ <i data-feather="plus" class="w-4 h-4"></i> Add Another Appendix
209
+ </button>
210
+ </div>
211
+ </div>
212
+
213
+ <div class="flex justify-between items-center mt-12">
214
+ <button class="text-purple-600 flex items-center gap-2">
215
+ <i data-feather="arrow-left" class="w-4 h-4"></i> Back to Sections
216
+ </button>
217
+ <div class="flex gap-4">
218
+ <button class="border border-gray-300 px-6 py-2 rounded-lg font-medium hover:bg-gray-50">
219
+ Preview
220
+ </button>
221
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg font-medium">
222
+ Generate PDF
223
+ </button>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <custom-footer></custom-footer>
233
+
234
+ <script src="components/navbar.js"></script>
235
+ <script src="components/footer.js"></script>
236
+ <script src="script.js"></script>
237
+ <script>
238
+ feather.replace();
239
+ </script>
240
+ </body>
241
+ </html>
index.html CHANGED
@@ -1,19 +1,80 @@
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>ProposalCraft Pro Wizard</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
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
13
+ </head>
14
+ <body class="min-h-screen bg-gray-50">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <div id="hero" class="relative overflow-hidden h-screen flex items-center justify-center">
18
+ <div class="absolute inset-0 z-0" id="vanta-bg"></div>
19
+ <div class="relative z-10 text-center px-4">
20
+ <h1 class="text-5xl md:text-7xl font-bold text-white mb-6">Craft Proposals <br>Like a Wizard</h1>
21
+ <p class="text-xl text-white mb-8 max-w-2xl mx-auto">Magically transform your ideas into professional proposals with our AI-powered toolkit.</p>
22
+ <div class="flex gap-4 justify-center">
23
+ <a href="/create.html" class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3 rounded-lg font-medium transition-all shadow-lg flex items-center gap-2">
24
+ <i data-feather="wand"></i> Start Crafting
25
+ </a>
26
+ <a href="#features" class="bg-white hover:bg-gray-100 text-purple-600 px-8 py-3 rounded-lg font-medium transition-all shadow-lg">
27
+ Learn More
28
+ </a>
29
+ </div>
30
+ </div>
31
+ </div>
32
+
33
+ <section id="features" class="py-20 px-4">
34
+ <div class="max-w-6xl mx-auto">
35
+ <h2 class="text-3xl font-bold text-center mb-16">Your Proposal Toolkit</h2>
36
+ <div class="grid md:grid-cols-3 gap-8">
37
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow">
38
+ <div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
39
+ <i data-feather="edit-3" class="text-purple-600 w-8 h-8"></i>
40
+ </div>
41
+ <h3 class="text-xl font-bold mb-3">AI-Powered Writing</h3>
42
+ <p class="text-gray-600">Generate professional content with our smart writing assistant that learns your style.</p>
43
+ </div>
44
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow">
45
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
46
+ <i data-feather="pie-chart" class="text-blue-600 w-8 h-8"></i>
47
+ </div>
48
+ <h3 class="text-xl font-bold mb-3">Data Visualization</h3>
49
+ <p class="text-gray-600">Transform numbers into compelling charts and graphs with one click.</p>
50
+ </div>
51
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow">
52
+ <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mb-6">
53
+ <i data-feather="layers" class="text-green-600 w-8 h-8"></i>
54
+ </div>
55
+ <h3 class="text-xl font-bold mb-3">Templates Galore</h3>
56
+ <p class="text-gray-600">Choose from 100+ professionally designed templates for any industry.</p>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </section>
61
+
62
+ <custom-footer></custom-footer>
63
+
64
+ <script src="components/navbar.js"></script>
65
+ <script src="components/footer.js"></script>
66
+ <script src="script.js"></script>
67
+ <script>
68
+ feather.replace();
69
+ VANTA.NET({
70
+ el: "#vanta-bg",
71
+ color: 0x7c3aed,
72
+ backgroundColor: 0xf9fafb,
73
+ points: 12,
74
+ maxDistance: 20,
75
+ spacing: 15
76
+ });
77
+ </script>
78
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
79
+ </body>
80
+ </html>
my-proposals.html ADDED
@@ -0,0 +1,124 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>My Proposals | ProposalCraft</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
+ </head>
11
+ <body class="bg-gray-50">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <div class="container mx-auto px-4 py-12 max-w-6xl">
15
+ <div class="flex items-center justify-between mb-8">
16
+ <h1 class="text-3xl font-bold text-gray-800">My Proposals</h1>
17
+ <a href="/create.html" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg font-medium flex items-center gap-2">
18
+ <i data-feather="plus"></i> New Proposal
19
+ </a>
20
+ </div>
21
+
22
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
23
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
24
+ <!-- Proposal Card 1 -->
25
+ <div class="border rounded-lg overflow-hidden hover:shadow-md transition-shadow">
26
+ <div class="bg-gray-100 p-4">
27
+ <h3 class="font-bold text-lg">Website Redesign Proposal</h3>
28
+ <p class="text-gray-500 text-sm">Last edited: 2 days ago</p>
29
+ </div>
30
+ <div class="p-4">
31
+ <div class="flex items-center justify-between mb-3">
32
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Active</span>
33
+ <span class="text-gray-500 text-sm">12 pages</span>
34
+ </div>
35
+ <p class="text-gray-600 mb-4">Proposal for redesigning the company website with modern UX principles.</p>
36
+ <div class="flex justify-between">
37
+ <a href="#" class="text-purple-600 hover:text-purple-800 flex items-center gap-1">
38
+ <i data-feather="eye" class="w-4 h-4"></i> Preview
39
+ </a>
40
+ <a href="#" class="text-blue-600 hover:text-blue-800 flex items-center gap-1">
41
+ <i data-feather="download" class="w-4 h-4"></i> PDF
42
+ </a>
43
+ <a href="/create.html" class="text-gray-600 hover:text-gray-800 flex items-center gap-1">
44
+ <i data-feather="edit" class="w-4 h-4"></i> Edit
45
+ </a>
46
+ </div>
47
+ </div>
48
+ </div>
49
+
50
+ <!-- Proposal Card 2 -->
51
+ <div class="border rounded-lg overflow-hidden hover:shadow-md transition-shadow">
52
+ <div class="bg-gray-100 p-4">
53
+ <h3 class="font-bold text-lg">Marketing Campaign</h3>
54
+ <p class="text-gray-500 text-sm">Last edited: 1 week ago</p>
55
+ </div>
56
+ <div class="p-4">
57
+ <div class="flex items-center justify-between mb-3">
58
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Sent</span>
59
+ <span class="text-gray-500 text-sm">8 pages</span>
60
+ </div>
61
+ <p class="text-gray-600 mb-4">Q3 marketing strategy proposal for the new product launch.</p>
62
+ <div class="flex justify-between">
63
+ <a href="#" class="text-purple-600 hover:text-purple-800 flex items-center gap-1">
64
+ <i data-feather="eye" class="w-4 h-4"></i> Preview
65
+ </a>
66
+ <a href="#" class="text-blue-600 hover:text-blue-800 flex items-center gap-1">
67
+ <i data-feather="download" class="w-4 h-4"></i> PDF
68
+ </a>
69
+ <a href="/create.html" class="text-gray-600 hover:text-gray-800 flex items-center gap-1">
70
+ <i data-feather="edit" class="w-4 h-4"></i> Edit
71
+ </a>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Proposal Card 3 -->
77
+ <div class="border rounded-lg overflow-hidden hover:shadow-md transition-shadow">
78
+ <div class="bg-gray-100 p-4">
79
+ <h3 class="font-bold text-lg">Mobile App Development</h3>
80
+ <p class="text-gray-500 text-sm">Last edited: 3 weeks ago</p>
81
+ </div>
82
+ <div class="p-4">
83
+ <div class="flex items-center justify-between mb-3">
84
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Draft</span>
85
+ <span class="text-gray-500 text-sm">5 pages</span>
86
+ </div>
87
+ <p class="text-gray-600 mb-4">Initial proposal for customer loyalty mobile application.</p>
88
+ <div class="flex justify-between">
89
+ <a href="#" class="text-purple-600 hover:text-purple-800 flex items-center gap-1">
90
+ <i data-feather="eye" class="w-4 h-4"></i> Preview
91
+ </a>
92
+ <a href="#" class="text-blue-600 hover:text-blue-800 flex items-center gap-1">
93
+ <i data-feather="download" class="w-4 h-4"></i> PDF
94
+ </a>
95
+ <a href="/create.html" class="text-gray-600 hover:text-gray-800 flex items-center gap-1">
96
+ <i data-feather="edit" class="w-4 h-4"></i> Edit
97
+ </a>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Add New Card -->
103
+ <div class="border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center hover:border-purple-500 transition-colors">
104
+ <a href="/create.html" class="p-8 text-center">
105
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
106
+ <i data-feather="plus" class="text-purple-600"></i>
107
+ </div>
108
+ <h3 class="font-medium text-gray-700">Create New Proposal</h3>
109
+ </a>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <custom-footer></custom-footer>
116
+
117
+ <script src="components/navbar.js"></script>
118
+ <script src="components/footer.js"></script>
119
+ <script src="script.js"></script>
120
+ <script>
121
+ feather.replace();
122
+ </script>
123
+ </body>
124
+ </html>
script.js ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Shared functionality
2
+ document.addEventListener('DOMContentLoaded', () => {
3
+ // Initialize tooltips
4
+ const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
5
+ tooltipTriggerList.map(function (tooltipTriggerEl) {
6
+ return new bootstrap.Tooltip(tooltipTriggerEl);
7
+ });
8
+
9
+ // Smooth scrolling for anchor links
10
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
11
+ anchor.addEventListener('click', function (e) {
12
+ e.preventDefault();
13
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
14
+ behavior: 'smooth'
15
+ });
16
+ });
17
+ });
18
+ });
19
+
20
+ // Form validation helper
21
+ function validateForm(form) {
22
+ let isValid = true;
23
+ const inputs = form.querySelectorAll('input[required], textarea[required]');
24
+
25
+ inputs.forEach(input => {
26
+ if (!input.value.trim()) {
27
+ input.classList.add('border-red-500');
28
+ isValid = false;
29
+ } else {
30
+ input.classList.remove('border-red-500');
31
+ }
32
+ });
33
+
34
+ return isValid;
35
+ }
style.css CHANGED
@@ -1,28 +1,35 @@
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
1
+ /* Custom styles */
2
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
3
+
4
  body {
5
+ font-family: 'Inter', sans-serif;
6
+ scroll-behavior: smooth;
7
+ }
8
+
9
+ /* Hero section with animated background */
10
+ #hero {
11
+ background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
12
  }
13
 
14
+ /* Smooth transitions for interactive elements */
15
+ button, a {
16
+ transition: all 0.2s ease;
17
  }
18
 
19
+ /* Custom scrollbar */
20
+ ::-webkit-scrollbar {
21
+ width: 8px;
 
 
22
  }
23
 
24
+ ::-webkit-scrollbar-track {
25
+ background: #f1f1f1;
 
 
 
 
26
  }
27
 
28
+ ::-webkit-scrollbar-thumb {
29
+ background: #8b5cf6;
30
+ border-radius: 4px;
31
  }
32
+
33
+ ::-webkit-scrollbar-thumb:hover {
34
+ background: #6d28d9;
35
+ }