Spaces:

asifpa
/

carpuco

Running

App Files Files Community

asifpa commited on Apr 6

Commit

c6b1d22

verified ·

1 Parent(s): 22a5bdf

Add 1 files

Browse files

Files changed (1) hide show

index.html +97 -56

index.html CHANGED Viewed

@@ -47,6 +47,22 @@
         .error {
             border-color: #ef4444 !important;
         }
     </style>
 </head>
 <body class="min-h-screen p-4 md:p-8">
@@ -210,10 +226,7 @@
             <!-- Action Buttons -->
             <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
-                <button id="save-btn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg flex items-center justify-center transition">
-                    <i class="fas fa-save mr-2"></i> Save Schedule
-                </button>
-                <button class="bg-white hover:bg-green-50 text-green-700 border border-green-300 font-bold py-3 px-6 rounded-lg flex items-center justify-center transition">
                     <i class="fas fa-share-alt mr-2"></i> Share with Neighbors
                 </button>
                 <button id="reset-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold py-3 px-6 rounded-lg flex items-center justify-center transition">
@@ -228,6 +241,9 @@
         </div>
     </div>
     <!-- Load Google Maps API for Places autocomplete -->
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=places&callback=initAutocomplete" async defer></script>
@@ -296,6 +312,68 @@
             }
         }
         // Add some interactivity
         document.addEventListener('DOMContentLoaded', function() {
             // Make checkboxes toggle the row color
@@ -357,13 +435,13 @@
             firstNameInput.addEventListener('input', () => validateSingleWord(firstNameInput, nameError));
-            // Save schedule to file
-            document.getElementById('save-btn').addEventListener('click', function() {
                 // Validate inputs
                 const isNameValid = validateSingleWord(firstNameInput, nameError);
                 if (!isNameValid) {
-                    alert('Please fix the errors before saving');
                     return;
                 }
@@ -374,56 +452,19 @@
                     return;
                 }
-                // Collect all data
-                const scheduleData = {
-                    firstName: firstNameInput.value.trim(),
-                    homeAddress: document.getElementById('home-address').value,
-                    officeAddress: document.getElementById('office-address').value,
-                    schedule: {
-                        monday: {
-                            depart: document.getElementById('mon-depart').value,
-                            return: document.getElementById('mon-return').value,
-                            needed: document.getElementById('mon-check').checked
-                        },
-                        tuesday: {
-                            depart: document.getElementById('tue-depart').value,
-                            return: document.getElementById('tue-return').value,
-                            needed: document.getElementById('tue-check').checked
-                        },
-                        wednesday: {
-                            depart: document.getElementById('wed-depart').value,
-                            return: document.getElementById('wed-return').value,
-                            needed: document.getElementById('wed-check').checked
-                        },
-                        thursday: {
-                            depart: document.getElementById('thu-depart').value,
-                            return: document.getElementById('thu-return').value,
-                            needed: document.getElementById('thu-check').checked
-                        },
-                        friday: {
-                            depart: document.getElementById('fri-depart').value,
-                            return: document.getElementById('fri-return').value,
-                            needed: document.getElementById('fri-check').checked
-                        }
-                    }
-                };
-                // Convert to JSON
-                const jsonData = JSON.stringify(scheduleData, null, 2);
-                // Create download link
-                const blob = new Blob([jsonData], { type: 'application/json' });
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = `${firstNameInput.value.trim()}-carpool-schedule.json`;
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                URL.revokeObjectURL(url);
-                // Show success message
-                alert(`Schedule saved as ${firstNameInput.value.trim()}-carpool-schedule.json`);
             });
             // Reset form

         .error {
             border-color: #ef4444 !important;
         }
+        .toast {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #333;
+            color: white;
+            padding: 12px 24px;
+            border-radius: 4px;
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .toast.show {
+            opacity: 1;
+        }
     </style>
 </head>
 <body class="min-h-screen p-4 md:p-8">
             <!-- Action Buttons -->
             <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
+                <button id="share-btn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg flex items-center justify-center transition">
                     <i class="fas fa-share-alt mr-2"></i> Share with Neighbors
                 </button>
                 <button id="reset-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold py-3 px-6 rounded-lg flex items-center justify-center transition">
         </div>
     </div>
+    <!-- Toast notification -->
+    <div id="toast" class="toast">Link copied to clipboard!</div>
     <!-- Load Google Maps API for Places autocomplete -->
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=places&callback=initAutocomplete" async defer></script>
             }
         }
+        // Function to show toast notification
+        function showToast(message) {
+            const toast = document.getElementById('toast');
+            toast.textContent = message;
+            toast.classList.add('show');
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, 3000);
+        }
+        // Function to encode data for URL
+        function encodeData() {
+            const data = {
+                firstName: document.getElementById('first-name').value,
+                homeAddress: document.getElementById('home-address').value,
+                officeAddress: document.getElementById('office-address').value,
+                schedule: {
+                    monday: {
+                        depart: document.getElementById('mon-depart').value,
+                        return: document.getElementById('mon-return').value,
+                        needed: document.getElementById('mon-check').checked
+                    },
+                    tuesday: {
+                        depart: document.getElementById('tue-depart').value,
+                        return: document.getElementById('tue-return').value,
+                        needed: document.getElementById('tue-check').checked
+                    },
+                    wednesday: {
+                        depart: document.getElementById('wed-depart').value,
+                        return: document.getElementById('wed-return').value,
+                        needed: document.getElementById('wed-check').checked
+                    },
+                    thursday: {
+                        depart: document.getElementById('thu-depart').value,
+                        return: document.getElementById('thu-return').value,
+                        needed: document.getElementById('thu-check').checked
+                    },
+                    friday: {
+                        depart: document.getElementById('fri-depart').value,
+                        return: document.getElementById('fri-return').value,
+                        needed: document.getElementById('fri-check').checked
+                    }
+                }
+            };
+            // Convert to JSON and then to base64 for URL
+            const jsonString = JSON.stringify(data);
+            return btoa(encodeURIComponent(jsonString));
+        }
+        // Function to copy text to clipboard
+        async function copyToClipboard(text) {
+            try {
+                await navigator.clipboard.writeText(text);
+                return true;
+            } catch (err) {
+                console.error('Failed to copy text: ', err);
+                return false;
+            }
+        }
         // Add some interactivity
         document.addEventListener('DOMContentLoaded', function() {
             // Make checkboxes toggle the row color
             firstNameInput.addEventListener('input', () => validateSingleWord(firstNameInput, nameError));
+            // Share button functionality
+            document.getElementById('share-btn').addEventListener('click', async function() {
                 // Validate inputs
                 const isNameValid = validateSingleWord(firstNameInput, nameError);
                 if (!isNameValid) {
+                    alert('Please fix the errors before sharing');
                     return;
                 }
                     return;
                 }
+                // Generate the encoded data
+                const encodedData = encodeData();
+                const shareUrl = `https://huggingface.co/spaces/asifpa/carpuco/${encodedData}`;
+                // Copy to clipboard
+                const success = await copyToClipboard(shareUrl);
+                if (success) {
+                    showToast('Link copied to clipboard!');
+                } else {
+                    // Fallback if clipboard API fails
+                    prompt('Copy this link to share with neighbors:', shareUrl);
+                }
             });
             // Reset form