Hugging Face's logo

Spaces:
TimexPeachtree
/
deep-enquiry
Running

App Files Community
TimexPeachtree commited on
Commit
28da0ba
·
verified ·
1 Parent(s): 1d339b2

Make the site in IBM Carbon CSS Framework but using only vanilla JS no React - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +72 -105
index.html CHANGED
@@ -4,49 +4,15 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Enquiry Form with Preview</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: '#3b82f6',
15
- secondary: '#1d4ed8',
16
- accent: '#93c5fd',
17
- paper: '#f8fafc'
18
- }
19
- }
20
- }
21
- }
22
- </script>
23
  <style>
24
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
25
-
26
  body {
27
- font-family: 'Inter', sans-serif;
28
- background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
29
  min-height: 100vh;
30
  }
31
 
32
- .paper-preview {
33
- background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
34
- box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
35
- border: 1px solid #e2e8f0;
36
- position: relative;
37
- overflow: hidden;
38
- }
39
-
40
- .paper-preview::before {
41
- content: "";
42
- position: absolute;
43
- top: 0;
44
- left: 0;
45
- right: 0;
46
- height: 40px;
47
- background: linear-gradient(to right, #1d4ed8, #3b82f6);
48
- }
49
-
50
  .watermark {
51
  position: absolute;
52
  opacity: 0.05;
@@ -55,79 +21,76 @@
55
  transform: rotate(-30deg);
56
  pointer-events: none;
57
  z-index: 0;
58
- color: #1e40af;
59
- }
60
-
61
- .item-row:hover {
62
- background-color: #f1f5f9;
63
- }
64
-
65
- .print-button {
66
- transition: all 0.3s ease;
67
- }
68
-
69
- .print-button:hover {
70
- transform: translateY(-2px);
71
- box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
72
  }
73
 
74
  .company-logo {
75
- background: linear-gradient(135deg, #1d4ed8, #3b82f6);
76
  -webkit-background-clip: text;
77
  -webkit-text-fill-color: transparent;
78
  }
79
 
80
  .header-divider {
81
  height: 2px;
82
- background: linear-gradient(to right, transparent, #3b82f6, transparent);
 
 
 
 
 
 
 
 
 
 
83
  }
84
  </style>
85
  </head>
86
- <body class="py-8 px-4">
87
- <div class="max-w-6xl mx-auto">
88
  <!-- Header -->
89
- <div class="text-center mb-10">
90
- <h1 class="text-4xl font-bold text-gray-800 mb-2">Enquiry Form</h1>
91
- <p class="text-gray-600 max-w-2xl mx-auto">Create detailed enquiries with item specifications, quantities, and pricing. Preview your document before printing.</p>
92
  </div>
93
 
94
- <div class="flex flex-col lg:flex-row gap-8">
95
  <!-- Form Section -->
96
- <div class="w-full lg:w-1/2">
97
- <div class="bg-white rounded-xl shadow-lg p-6">
98
- <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
99
- <i class="fas fa-edit mr-3 text-primary"></i> Enquiry Details
100
  </h2>
101
 
102
  <!-- Company Info -->
103
- <div class="mb-8">
104
- <h3 class="text-lg font-semibold text-gray-700 mb-3">Company Information</h3>
105
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
106
- <div>
107
- <label class="block text-sm font-medium text-gray-700 mb-1">Company Name</label>
108
- <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Enter company name">
109
  </div>
110
- <div>
111
- <label class="block text-sm font-medium text-gray-700 mb-1">Contact Person</label>
112
- <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Enter contact name">
113
  </div>
114
- <div>
115
- <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
116
- <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Enter email">
117
  </div>
118
- <div>
119
- <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
120
- <input type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Enter phone number">
121
  </div>
122
  </div>
123
  </div>
124
 
125
  <!-- Items Section -->
126
  <div>
127
- <div class="flex justify-between items-center mb-3">
128
- <h3 class="text-lg font-semibold text-gray-700">Items</h3>
129
- <button id="add-item" class="px-4 py-2 bg-primary hover:bg-secondary text-white rounded-lg flex items-center">
130
- <i class="fas fa-plus mr-2"></i> Add Item
131
  </button>
132
  </div>
133
 
@@ -149,26 +112,30 @@
149
  </table>
150
  </div>
151
 
152
- <div class="mt-6 flex justify-end">
153
- <div class="bg-gray-50 p-4 rounded-lg w-full max-w-xs">
154
- <div class="flex justify-between mb-2">
155
- <span class="font-medium text-gray-700">Subtotal:</span>
156
- <span id="subtotal" class="font-medium">$0.00</span>
157
  </div>
158
- <div class="flex justify-between mb-2">
159
- <span class="font-medium text-gray-700">Tax (5%):</span>
160
- <span id="tax" class="font-medium">$0.00</span>
161
  </div>
162
- <div class="flex justify-between text-lg font-bold pt-2 border-t border-gray-200">
163
- <span>Total:</span>
164
- <span id="total" class="text-primary">$0.00</span>
165
  </div>
166
  </div>
167
  </div>
168
 
169
- <div class="mt-8">
170
- <label class="block text-sm font-medium text-gray-700 mb-2">Additional Notes</label>
171
- <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent h-24" placeholder="Enter any additional notes or requirements..."></textarea>
 
 
 
 
172
  </div>
173
 
174
  <div class="mt-8 flex justify-end gap-4">
@@ -184,18 +151,18 @@
184
  </div>
185
 
186
  <!-- Preview Section -->
187
- <div class="w-full lg:w-1/2">
188
- <div class="sticky top-8">
189
- <div class="flex justify-between items-center mb-4">
190
- <h2 class="text-2xl font-bold text-gray-800 flex items-center">
191
- <i class="fas fa-file-alt mr-3 text-primary"></i> Document Preview
192
  </h2>
193
- <button id="print-btn" class="print-button px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg flex items-center">
194
- <i class="fas fa-print mr-2"></i> Print Preview
195
  </button>
196
  </div>
197
 
198
- <div class="paper-preview rounded-xl p-8 relative overflow-hidden">
199
  <div class="watermark">DRAFT</div>
200
 
201
  <!-- Preview Header -->
@@ -273,7 +240,7 @@
273
  <span id="preview-subtotal">$0.00</span>
274
  </div>
275
  <div class="flex justify-between mb-1">
276
- <span class="text-gray-700">Tax (10%):</span>
277
  <span id="preview-tax">$0.00</span>
278
  </div>
279
  <div class="flex justify-between font-bold text-lg pt-2 border-t border-gray-300 mt-2">
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Enquiry Form with Preview</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  <style>
 
 
11
  body {
12
+ background: linear-gradient(135deg, #f8f9fa, #e9ecef);
 
13
  min-height: 100vh;
14
  }
15
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  .watermark {
17
  position: absolute;
18
  opacity: 0.05;
 
21
  transform: rotate(-30deg);
22
  pointer-events: none;
23
  z-index: 0;
24
+ color: #0d6efd;
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  }
26
 
27
  .company-logo {
28
+ background: linear-gradient(135deg, #0d6efd, #0b5ed7);
29
  -webkit-background-clip: text;
30
  -webkit-text-fill-color: transparent;
31
  }
32
 
33
  .header-divider {
34
  height: 2px;
35
+ background: linear-gradient(to right, transparent, #0d6efd, transparent);
36
+ }
37
+
38
+ .paper-preview::before {
39
+ content: "";
40
+ position: absolute;
41
+ top: 0;
42
+ left: 0;
43
+ right: 0;
44
+ height: 40px;
45
+ background: linear-gradient(to right, #0b5ed7, #0d6efd);
46
  }
47
  </style>
48
  </head>
49
+ <body class="py-5">
50
+ <div class="container">
51
  <!-- Header -->
52
+ <div class="text-center mb-5">
53
+ <h1 class="display-4 fw-bold text-dark mb-3">Enquiry Form</h1>
54
+ <p class="lead text-muted mx-auto" style="max-width: 600px;">Create detailed enquiries with item specifications, quantities, and pricing. Preview your document before printing.</p>
55
  </div>
56
 
57
+ <div class="row g-4">
58
  <!-- Form Section -->
59
+ <div class="col-lg-6">
60
+ <div class="bg-white rounded-3 shadow p-4">
61
+ <h2 class="h2 text-dark mb-4 d-flex align-items-center">
62
+ <i class="fas fa-edit me-3 text-primary"></i> Enquiry Details
63
  </h2>
64
 
65
  <!-- Company Info -->
66
+ <div class="mb-4">
67
+ <h3 class="h5 text-secondary mb-3">Company Information</h3>
68
+ <div class="row g-3">
69
+ <div class="col-md-6">
70
+ <label class="form-label block text-sm font-medium text-gray-700 mb-1">Company Name</label>
71
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent form-control" placeholder="Enter company name">
72
  </div>
73
+ <div class="col-md-6">
74
+ <label class="form-label block text-sm font-medium text-gray-700 mb-1">Contact Person</label>
75
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent form-control" placeholder="Enter contact name">
76
  </div>
77
+ <div class="col-md-6">
78
+ <label class="form-label block text-sm font-medium text-gray-700 mb-1">Email</label>
79
+ <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent form-control" placeholder="Enter email">
80
  </div>
81
+ <div class="col-md-6">
82
+ <label class="form-label block text-sm font-medium text-gray-700 mb-1">Phone</label>
83
+ <input type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent form-control" placeholder="Enter phone number">
84
  </div>
85
  </div>
86
  </div>
87
 
88
  <!-- Items Section -->
89
  <div>
90
+ <div class="d-flex justify-content-between align-items-center mb-3">
91
+ <h3 class="h5 text-secondary">Items</h3>
92
+ <button id="add-item" class="btn btn-primary d-flex align-items-center">
93
+ <i class="fas fa-plus me-2"></i> Add Item
94
  </button>
95
  </div>
96
 
 
112
  </table>
113
  </div>
114
 
115
+ <div class="mt-4 text-end">
116
+ <div class="d-inline-block border rounded-3 p-3 bg-light">
117
+ <div class="d-flex justify-content-between mb-2">
118
+ <span class="fw-medium me-3">Subtotal:</span>
119
+ <span id="subtotal" class="fw-medium">$0.00</span>
120
  </div>
121
+ <div class="d-flex justify-content-between mb-2">
122
+ <span class="fw-medium me-3">Tax (5%):</span>
123
+ <span id="tax" class="fw-medium">$0.00</span>
124
  </div>
125
+ <div class="d-flex justify-content-between pt-2 border-top">
126
+ <span class="fw-bold">Total:</span>
127
+ <span id="total" class="fw-bold text-primary">$0.00</span>
128
  </div>
129
  </div>
130
  </div>
131
 
132
+ <div class="mt-8 mb-4">
133
+ <label class="form-label fw-bold text-dark mb-3">Additional Notes</label>
134
+ <textarea class="form-control w-100 px-4 py-3 border border-gray-300 rounded-3 focus:ring-3 focus:ring-primary focus:border-transparent"
135
+ rows="2"
136
+ style="min-height: 50px;"
137
+ placeholder="Enter any additional notes, special requirements, or delivery instructions..."></textarea>
138
+ <div class="form-text text-muted mt-2">This information will appear on your enquiry document.</div>
139
  </div>
140
 
141
  <div class="mt-8 flex justify-end gap-4">
 
151
  </div>
152
 
153
  <!-- Preview Section -->
154
+ <div class="col-lg-6">
155
+ <div class="sticky-top" style="top: 20px;">
156
+ <div class="d-flex justify-content-between align-items-center mb-3">
157
+ <h2 class="h2 text-dark d-flex align-items-center">
158
+ <i class="fas fa-file-alt me-3 text-primary"></i> Document Preview
159
  </h2>
160
+ <button id="print-btn" class="btn btn-success d-flex align-items-center">
161
+ <i class="fas fa-print me-2"></i> Print Preview
162
  </button>
163
  </div>
164
 
165
+ <div class="bg-white rounded-3 p-5 position-relative overflow-hidden" style="background: linear-gradient(to bottom, #f8f9fa, #e9ecef); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); border: 1px solid #dee2e6;">
166
  <div class="watermark">DRAFT</div>
167
 
168
  <!-- Preview Header -->
 
240
  <span id="preview-subtotal">$0.00</span>
241
  </div>
242
  <div class="flex justify-between mb-1">
243
+ <span class="text-gray-700">Tax (5%):</span>
244
  <span id="preview-tax">$0.00</span>
245
  </div>
246
  <div class="flex justify-between font-bold text-lg pt-2 border-t border-gray-300 mt-2">