srampytlik commited on
Commit
488c39e
·
verified ·
1 Parent(s): 7c728c1

I have web pages supported with php. I need to create a form so that it has the same layout for 200 participants, but with specific set of 2 images (christmas photo of a child typically for parents and grandparents) for each user. Each anonymized user will receive specific link to the form via a unique QR code (use php to identify the user based on the link used in the QR code). The user will select one of the two presented pictures of his/her child and optionally enter number of additional photos. Each option has specific price.

Browse files
Files changed (4) hide show
  1. README.md +9 -5
  2. admin.html +221 -0
  3. index.html +239 -18
  4. submit.php +46 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🌍
4
- colorFrom: gray
5
- colorTo: red
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: undefined
3
+ colorFrom: purple
4
+ colorTo: gray
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://deepsite.hf.co).
14
+
admin.html ADDED
@@ -0,0 +1,221 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Admin Dashboard - Christmas Photos</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ .participant-card {
12
+ transition: all 0.2s ease;
13
+ }
14
+ .participant-card:hover {
15
+ transform: translateY(-2px);
16
+ }
17
+ </style>
18
+ </head>
19
+ <body class="bg-gray-100">
20
+ <div class="flex min-h-screen">
21
+ <!-- Sidebar -->
22
+ <aside class="w-64 bg-primary text-white p-4 hidden md:block">
23
+ <div class="flex items-center mb-8 px-2">
24
+ <i data-feather="camera" class="w-6 h-6 mr-2"></i>
25
+ <h1 class="text-xl font-bold">Santa's Photo Workshop</h1>
26
+ </div>
27
+ <nav>
28
+ <a href="#" class="flex items-center px-2 py-3 bg-primary-700 rounded-md mb-1">
29
+ <i data-feather="home" class="w-5 h-5 mr-3"></i>
30
+ <span>Dashboard</span>
31
+ </a>
32
+ <a href="#" class="flex items-center px-2 py-3 hover:bg-primary-700 rounded-md mb-1">
33
+ <i data-feather="users" class="w-5 h-5 mr-3"></i>
34
+ <span>Participants</span>
35
+ </a>
36
+ <a href="#" class="flex items-center px-2 py-3 hover:bg-primary-700 rounded-md mb-1">
37
+ <i data-feather="settings" class="w-5 h-5 mr-3"></i>
38
+ <span>Settings</span>
39
+ </a>
40
+ </nav>
41
+ </aside>
42
+
43
+ <!-- Main Content -->
44
+ <main class="flex-1 p-6">
45
+ <!-- Header -->
46
+ <header class="flex justify-between items-center mb-8">
47
+ <h1 class="text-2xl font-bold text-gray-800">Christmas Photos Dashboard</h1>
48
+ <div class="flex items-center">
49
+ <i data-feather="bell" class="w-5 h-5 text-gray-600 mr-4 cursor-pointer"></i>
50
+ <div class="flex items-center">
51
+ <img src="http://static.photos/people/200x200/1" alt="Admin" class="w-8 h-8 rounded-full mr-2">
52
+ <span class="text-gray-700">Admin</span>
53
+ </div>
54
+ </div>
55
+ </header>
56
+
57
+ <!-- Stats Cards -->
58
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
59
+ <div class="bg-white rounded-lg shadow p-6">
60
+ <div class="flex justify-between items-center">
61
+ <div>
62
+ <p class="text-gray-500">Total Participants</p>
63
+ <h3 class="text-2xl font-bold">200</h3>
64
+ </div>
65
+ <div class="p-3 rounded-full bg-blue-100 text-primary">
66
+ <i data-feather="users" class="w-6 h-6"></i>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ <div class="bg-white rounded-lg shadow p-6">
71
+ <div class="flex justify-between items-center">
72
+ <div>
73
+ <p class="text-gray-500">Responses Received</p>
74
+ <h3 class="text-2xl font-bold">147</h3>
75
+ </div>
76
+ <div class="p-3 rounded-full bg-green-100 text-secondary">
77
+ <i data-feather="check-circle" class="w-6 h-6"></i>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ <div class="bg-white rounded-lg shadow p-6">
82
+ <div class="flex justify-between items-center">
83
+ <div>
84
+ <p class="text-gray-500">Completion Rate</p>
85
+ <h3 class="text-2xl font-bold">73.5%</h3>
86
+ </div>
87
+ <div class="p-3 rounded-full bg-purple-100 text-purple-500">
88
+ <i data-feather="bar-chart-2" class="w-6 h-6"></i>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Charts Section -->
95
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
96
+ <div class="bg-white rounded-lg shadow p-6">
97
+ <h3 class="text-lg font-semibold mb-4">Portrait Selection Distribution</h3>
98
+ <canvas id="selectionChart" height="250"></canvas>
99
+ </div>
100
+ <div class="bg-white rounded-lg shadow p-6">
101
+ <h3 class="text-lg font-semibold mb-4">Response Timeline</h3>
102
+ <canvas id="timelineChart" height="250"></canvas>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Recent Participants -->
107
+ <div class="bg-white rounded-lg shadow overflow-hidden">
108
+ <div class="p-6 border-b">
109
+ <div class="flex justify-between items-center">
110
+ <h3 class="text-lg font-semibold">Recent Responses</h3>
111
+ <button class="text-primary hover:text-primary-700 text-sm font-medium">
112
+ View All
113
+ </button>
114
+ </div>
115
+ </div>
116
+ <div class="divide-y">
117
+ <!-- Participant Row -->
118
+ <div class="participant-card p-4 hover:bg-gray-50 cursor-pointer flex items-center justify-between">
119
+ <div class="flex items-center">
120
+ <img src="http://static.photos/people/200x200/2" alt="Participant" class="w-10 h-10 rounded-full mr-4">
121
+ <div>
122
+ <h4 class="font-medium">Participant #42</h4>
123
+ <p class="text-sm text-gray-500">Basic Package (2 additional)</p>
124
+ </div>
125
+ </div>
126
+ <div class="flex items-center">
127
+ <span class="text-sm text-gray-500 mr-4">10 mins ago</span>
128
+ <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- More participants... -->
133
+ <div class="participant-card p-4 hover:bg-gray-50 cursor-pointer flex items-center justify-between">
134
+ <div class="flex items-center">
135
+ <img src="http://static.photos/people/200x200/3" alt="Participant" class="w-10 h-10 rounded-full mr-4">
136
+ <div>
137
+ <h4 class="font-medium">Participant #87</h4>
138
+ <p class="text-sm text-gray-500">Selected Option 1</p>
139
+ </div>
140
+ </div>
141
+ <div class="flex items-center">
142
+ <span class="text-sm text-gray-500 mr-4">25 mins ago</span>
143
+ <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="participant-card p-4 hover:bg-gray-50 cursor-pointer flex items-center justify-between">
148
+ <div class="flex items-center">
149
+ <img src="http://static.photos/people/200x200/4" alt="Participant" class="w-10 h-10 rounded-full mr-4">
150
+ <div>
151
+ <h4 class="font-medium">Participant #156</h4>
152
+ <p class="text-sm text-gray-500">Selected Option 3</p>
153
+ </div>
154
+ </div>
155
+ <div class="flex items-center">
156
+ <span class="text-sm text-gray-500 mr-4">1 hour ago</span>
157
+ <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </main>
163
+ </div>
164
+
165
+ <script>
166
+ // Initialize feather icons
167
+ feather.replace();
168
+
169
+ // Initialize charts
170
+ const selectionCtx = document.getElementById('selectionChart').getContext('2d');
171
+ const selectionChart = new Chart(selectionCtx, {
172
+ type: 'doughnut',
173
+ data: {
174
+ labels: ['Basic Package', 'Premium Package'],
175
+ datasets: [{
176
+ data: [120, 80],
177
+ backgroundColor: [
178
+ '#3B82F6',
179
+ '#10B981',
180
+ '#6366F1'
181
+ ],
182
+ borderWidth: 0
183
+ }]
184
+ },
185
+ options: {
186
+ responsive: true,
187
+ plugins: {
188
+ legend: {
189
+ position: 'bottom',
190
+ }
191
+ }
192
+ }
193
+ });
194
+
195
+ const timelineCtx = document.getElementById('timelineChart').getContext('2d');
196
+ const timelineChart = new Chart(timelineCtx, {
197
+ type: 'line',
198
+ data: {
199
+ labels: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
200
+ datasets: [{
201
+ label: 'Responses',
202
+ data: [12, 19, 23, 28, 39, 45, 53],
203
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
204
+ borderColor: '#3B82F6',
205
+ borderWidth: 2,
206
+ tension: 0.3,
207
+ fill: true
208
+ }]
209
+ },
210
+ options: {
211
+ responsive: true,
212
+ scales: {
213
+ y: {
214
+ beginAtZero: true
215
+ }
216
+ }
217
+ }
218
+ });
219
+ </script>
220
+ </body>
221
+ </html>
index.html CHANGED
@@ -1,19 +1,240 @@
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>Christmas Photo Selection</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#3B82F6', // blue-500 as default primary
15
+ secondary: '#10B981', // emerald-500 as default secondary
16
+ }
17
+ }
18
+ }
19
+ }
20
+ </script>
21
+ <script src="https://unpkg.com/feather-icons"></script>
22
+ <script src="https://cdn.jsdelivr.net/npm/qrcode-svg@1.0.0/dist/qrcode.min.js"></script>
23
+ <style>
24
+ .portrait-card {
25
+ transition: all 0.3s ease;
26
+ }
27
+ .portrait-card:hover {
28
+ transform: scale(1.03);
29
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
30
+ }
31
+ .portrait-card.selected {
32
+ border: 3px solid #3B82F6;
33
+ }
34
+ .qr-code-container {
35
+ max-width: 200px;
36
+ margin: 0 auto;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gray-50 min-h-screen">
41
+ <div class="container mx-auto px-4 py-12">
42
+ <!-- Header -->
43
+ <header class="text-center mb-12">
44
+ <h1 class="text-3xl md:text-4xl font-bold text-primary mb-4">Select Your Christmas Photo</h1>
45
+ <p class="text-gray-600 max-w-2xl mx-auto">Please choose your preferred photo package below.</p>
46
+ </header>
47
+
48
+ <!-- Main Form -->
49
+ <main class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 md:p-8">
50
+ <!-- User Info -->
51
+ <div class="flex flex-col md:flex-row justify-between items-center mb-8">
52
+ <div class="mb-4 md:mb-0">
53
+ <h2 class="text-xl font-semibold text-gray-800">Child: <span id="childName"><?php echo isset($_GET['child']) ? htmlspecialchars($_GET['child']) : 'Unknown'; ?></span></h2>
54
+ <p class="text-gray-600">Christmas Photo Selection</p>
55
+ </div>
56
+ <div class="qr-code-container bg-white p-2 rounded">
57
+ <div id="userQRCode"></div>
58
+ </div>
59
+ </div>
60
+
61
+ <!-- Portrait Selection -->
62
+ <div class="mb-8">
63
+ <h3 class="text-lg font-medium text-gray-700 mb-4">Choose your photo package:</h3>
64
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
65
+ <!-- Photo Option 1 -->
66
+ <div class="portrait-card cursor-pointer rounded-lg overflow-hidden shadow-md" onclick="selectOption(1)">
67
+ <img id="photo1" src="/photos/<?php echo isset($_GET['child']) ? htmlspecialchars($_GET['child']) : 'default'; ?>_1.jpg" alt="Christmas Photo Option 1" class="w-full h-64 object-cover">
68
+ <div class="p-4 bg-gray-50">
69
+ <div class="flex items-center">
70
+ <input type="radio" name="photoSelection" id="option1" class="h-4 w-4 text-primary focus:ring-primary">
71
+ <label for="option1" class="ml-2 text-gray-700">Basic Package (€15)</label>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Photo Option 2 -->
77
+ <div class="portrait-card cursor-pointer rounded-lg overflow-hidden shadow-md" onclick="selectOption(2)">
78
+ <img id="photo2" src="/photos/<?php echo isset($_GET['child']) ? htmlspecialchars($_GET['child']) : 'default'; ?>_2.jpg" alt="Christmas Photo Option 2" class="w-full h-64 object-cover">
79
+ <div class="p-4 bg-gray-50">
80
+ <div class="flex items-center">
81
+ <input type="radio" name="photoSelection" id="option2" class="h-4 w-4 text-primary focus:ring-primary">
82
+ <label for="option2" class="ml-2 text-gray-700">Premium Package (€25)</label>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Additional Info -->
90
+ <!-- Additional Photos -->
91
+ <div class="mb-6">
92
+ <label for="additionalPhotos" class="block text-sm font-medium text-gray-700 mb-2">Additional photos (€5 each)</label>
93
+ <input type="number" id="additionalPhotos" min="0" max="10" value="0" class="w-20 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
94
+ </div>
95
+
96
+ <!-- Price Calculation -->
97
+ <div class="mb-6 p-4 bg-gray-50 rounded-lg">
98
+ <h4 class="text-lg font-medium text-gray-800 mb-2">Price Calculation</h4>
99
+ <div class="flex justify-between mb-1">
100
+ <span>Selected package:</span>
101
+ <span id="packagePrice">€0</span>
102
+ </div>
103
+ <div class="flex justify-between mb-1">
104
+ <span>Additional photos:</span>
105
+ <span id="additionalPrice">€0</span>
106
+ </div>
107
+ <div class="flex justify-between font-bold text-lg mt-2 pt-2 border-t">
108
+ <span>Total:</span>
109
+ <span id="totalPrice">€0</span>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Comments -->
114
+ <div class="mb-8">
115
+ <label for="comments" class="block text-sm font-medium text-gray-700 mb-2">Special requests (optional)</label>
116
+ <textarea id="comments" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"></textarea>
117
+ </div>
118
+
119
+ <!-- Submit Button -->
120
+ <div class="flex justify-between items-center">
121
+ <div id="paymentQR" class="hidden">
122
+ <!-- Payment QR will be generated here -->
123
+ </div>
124
+ <button onclick="submitForm()" class="bg-primary hover:bg-primary-600 text-white font-medium py-2 px-6 rounded-md shadow-sm transition duration-150">
125
+ Confirm Selection
126
+ </button>
127
+ </div>
128
+ </main>
129
+
130
+ <!-- Success Modal -->
131
+ <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
132
+ <div class="bg-white rounded-xl p-8 max-w-md mx-4">
133
+ <div class="text-center">
134
+ <i data-feather="check-circle" class="w-16 h-16 text-green-500 mx-auto mb-4"></i>
135
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">Thank You!</h3>
136
+ <p class="text-gray-600 mb-6">Your portrait selection has been successfully submitted.</p>
137
+ <button onclick="closeModal()" class="bg-primary hover:bg-primary-600 text-white font-medium py-2 px-6 rounded-md shadow-sm transition duration-150">
138
+ Close
139
+ </button>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <script>
146
+ // Initialize variables
147
+ const packagePrices = [15, 25]; // Basic and Premium package prices
148
+ const additionalPhotoPrice = 5;
149
+ let selectedOption = 0;
150
+
151
+ // Generate QR code for this child
152
+ const qrCode = new QRCode({
153
+ content: window.location.href,
154
+ padding: 4,
155
+ width: 200,
156
+ height: 200,
157
+ color: "#000000",
158
+ background: "#ffffff",
159
+ ecl: "M"
160
+ });
161
+ document.getElementById('userQRCode').innerHTML = qrCode.svg();
162
+ // Select option and calculate price
163
+ function selectOption(option) {
164
+ const portraitCards = document.querySelectorAll('.portrait-card');
165
+ portraitCards.forEach(card => card.classList.remove('selected'));
166
+
167
+ const selectedCard = document.querySelector(`.portrait-card:nth-child(${option})`);
168
+ selectedCard.classList.add('selected');
169
+
170
+ document.getElementById(`option${option}`).checked = true;
171
+ selectedOption = option;
172
+ calculatePrice();
173
+ }
174
+
175
+ // Calculate total price
176
+ function calculatePrice() {
177
+ const additionalPhotos = parseInt(document.getElementById('additionalPhotos').value) || 0;
178
+ const packagePrice = selectedOption > 0 ? packagePrices[selectedOption-1] : 0;
179
+ const additionalPrice = additionalPhotos * additionalPhotoPrice;
180
+ const totalPrice = packagePrice + additionalPrice;
181
+
182
+ document.getElementById('packagePrice').textContent = `€${packagePrice}`;
183
+ document.getElementById('additionalPrice').textContent = `€${additionalPrice}`;
184
+ document.getElementById('totalPrice').textContent = `€${totalPrice}`;
185
+ }
186
+
187
+ // Listen for additional photos change
188
+ document.getElementById('additionalPhotos').addEventListener('change', calculatePrice);
189
+ // Submit form function
190
+ function submitForm() {
191
+ const selectedOption = document.querySelector('input[name="photoSelection"]:checked');
192
+ if (!selectedOption) {
193
+ alert('Please select one photo package before submitting.');
194
+ return;
195
+ }
196
+
197
+ const childName = document.getElementById('childName').textContent;
198
+ const additionalPhotos = parseInt(document.getElementById('additionalPhotos').value) || 0;
199
+ const comments = document.getElementById('comments').value;
200
+ const totalPrice = document.getElementById('totalPrice').textContent;
201
+
202
+ // Generate payment QR
203
+ const paymentQR = new QRCode({
204
+ content: `bank://transfer?amount=${totalPrice.replace('€','')}&recipient=ChristmasPhotos`,
205
+ padding: 4,
206
+ width: 150,
207
+ height: 150,
208
+ color: "#000000",
209
+ background: "#ffffff",
210
+ ecl: "M"
211
+ });
212
+ document.getElementById('paymentQR').innerHTML = paymentQR.svg();
213
+ document.getElementById('paymentQR').classList.remove('hidden');
214
+
215
+ // Send data to Google Sheets (simplified example)
216
+ const data = {
217
+ child: childName,
218
+ option: selectedOption.id,
219
+ additionalPhotos: additionalPhotos,
220
+ totalPrice: totalPrice,
221
+ comments: comments,
222
+ timestamp: new Date().toISOString()
223
+ };
224
+
225
+ // In production, you would use Google Apps Script or API
226
+ console.log('Data to submit:', data);
227
+
228
+ // Show success modal
229
+ document.getElementById('successModal').classList.remove('hidden');
230
+ }
231
+ // Close modal function
232
+ function closeModal() {
233
+ document.getElementById('successModal').classList.add('hidden');
234
+ }
235
+
236
+ // Initialize feather icons
237
+ feather.replace();
238
+ </script>
239
+ </body>
240
  </html>
submit.php ADDED
@@ -0,0 +1,46 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ // Process form submission and save to Google Sheets
3
+ require_once __DIR__ . '/vendor/autoload.php'; // Include Google API client
4
+
5
+ // Get form data
6
+ $child = isset($_POST['child']) ? $_POST['child'] : '';
7
+ $option = isset($_POST['option']) ? $_POST['option'] : '';
8
+ $additional = isset($_POST['additional']) ? intval($_POST['additional']) : 0;
9
+ $comments = isset($_POST['comments']) ? $_POST['comments'] : '';
10
+ $total = isset($_POST['total']) ? $_POST['total'] : '0';
11
+ $timestamp = date('Y-m-d H:i:s');
12
+
13
+ // Configure Google Sheets API
14
+ $client = new Google_Client();
15
+ $client->setApplicationName('Christmas Photos');
16
+ $client->setScopes([Google_Service_Sheets::SPREADSHEETS]);
17
+ $client->setAuthConfig('credentials.json');
18
+ $client->setAccessType('offline');
19
+
20
+ $service = new Google_Service_Sheets($client);
21
+ $spreadsheetId = 'YOUR_SPREADSHEET_ID';
22
+ $range = 'Sheet1!A2:E';
23
+
24
+ // Prepare data
25
+ $values = [
26
+ [$child, $option, $additional, $total, $comments, $timestamp]
27
+ ];
28
+
29
+ $body = new Google_Service_Sheets_ValueRange([
30
+ 'values' => $values
31
+ ]);
32
+
33
+ $params = [
34
+ 'valueInputOption' => 'RAW'
35
+ ];
36
+
37
+ // Insert data
38
+ $result = $service->spreadsheets_values->append($spreadsheetId, $range, $body, $params);
39
+
40
+ // Return response
41
+ header('Content-Type: application/json');
42
+ echo json_encode([
43
+ 'success' => true,
44
+ 'message' => 'Data saved successfully'
45
+ ]);
46
+ ?>