Spaces:

pointvirgule
/

easyloc

Running

App Files Files Community

pointvirgule commited on Apr 6

Commit

1553fbb

verified ·

1 Parent(s): 14f9a83

Add 1 files

Browse files

Files changed (1) hide show

index.html +53 -167

index.html CHANGED Viewed

@@ -5,8 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>EasyLoc - Gestion des locations saisonnières</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .tab-active {
@@ -14,9 +12,6 @@
             color: #f97316;
             font-weight: 600;
         }
-        .datepicker {
-            z-index: 1000;
-        }
         .contract-section {
             margin-bottom: 1.5rem;
         }
@@ -28,27 +23,6 @@
         .bold-text {
             font-weight: bold;
         }
-        .account-modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0,0,0,0.5);
-            z-index: 1000;
-            justify-content: center;
-            align-items: center;
-        }
-        .account-modal-content {
-            background-color: white;
-            padding: 2rem;
-            border-radius: 0.5rem;
-            width: 90%;
-            max-width: 600px;
-            max-height: 90vh;
-            overflow-y: auto;
-        }
     </style>
 </head>
 <body class="bg-gray-50">
@@ -59,104 +33,14 @@
                     <i class="fas fa-home text-orange-500 text-4xl mr-3"></i>
                     <h1 class="text-3xl font-bold text-gray-800">Easy<span class="text-orange-500">Loc</span></h1>
                 </div>
-                <div id="account-btn" class="bg-orange-100 text-orange-800 px-4 py-2 rounded-full text-sm font-medium cursor-pointer hover:bg-orange-200 transition">
                     <i class="fas fa-user-circle mr-2"></i>
-                    <span id="user-name">Mon compte</span>
                 </div>
             </div>
             <p class="text-gray-600 mt-2">Gérez vos contrats de location saisonnière en toute simplicité</p>
         </header>
-        <!-- Account Modal -->
-        <div id="account-modal" class="account-modal">
-            <div class="account-modal-content">
-                <div class="flex justify-between items-center mb-6">
-                    <h2 class="text-2xl font-bold text-gray-800">Mon compte</h2>
-                    <button id="close-modal" class="text-gray-500 hover:text-gray-700">
-                        <i class="fas fa-times"></i>
-                    </button>
-                </div>
-                <div class="mb-8">
-                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Informations de connexion</h3>
-                    <div class="space-y-4">
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Email*</label>
-                            <input type="email" id="account-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-orange-500 focus:border-orange-500" required>
-                        </div>
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Mot de passe*</label>
-                            <input type="password" id="account-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-orange-500 focus:border-orange-500" required>
-                        </div>
-                    </div>
-                </div>
-                <div class="mb-8">
-                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Informations du propriétaire</h3>
-                    <div class="space-y-4">
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Nom*</label>
-                                <input type="text" id="account-owner-lastname" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-orange-500 focus:border-orange-500" required>
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Prénom*</label>
-                                <input type="text" id="account-owner-firstname" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-orange-500 focus:border-orange-500" required>
-                            </div>
-                        </div>
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Adresse*</label>
-                            <input type="text" id="account-owner-address" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-orange-500 focus:border-orange-500" required>
-                        </div>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Téléphone*</label>
-                                <input type="tel" id="account-owner-phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-orange-500 focus:border-orange-500" required>
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Email*</label>
-                                <input type="email" id="account-owner-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-orange-500 focus:border-orange-500" required>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="mb-8">
-                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Informations sur le logement</h3>
-                    <div class="space-y-4">
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Adresse du logement*</label>
-                            <input type="text" id="account-property-address" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-orange-500 focus:border-orange-500" required>
-                        </div>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Tarif journalier (€)*</label>
-                                <input type="number" id="account-daily-rate" min="0" step="0.01" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-orange-500 focus:border-orange-500" required>
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Frais de ménage (€)*</label>
-                                <input type="number" id="account-cleaning-fee" min="0" step="0.01" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-orange-500 focus:border-orange-500" required>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex justify-between pt-4">
-                    <button id="logout-btn" class="px-4 py-2 text-gray-700 font-medium rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hidden">
-                        <i class="fas fa-sign-out-alt mr-2"></i> Déconnexion
-                    </button>
-                    <div>
-                        <button id="cancel-account" class="px-4 py-2 border border-gray-300 text-gray-700 font-medium rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 mr-2">
-                            Annuler
-                        </button>
-                        <button id="save-account" class="px-6 py-2 bg-orange-600 text-white font-medium rounded-md hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500">
-                            Enregistrer
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
         <div class="bg-white rounded-xl shadow-md overflow-hidden">
             <!-- Navigation tabs -->
             <div class="border-b border-gray-200">
@@ -441,7 +325,7 @@
                         <div class="contract-section">
                             <h3 class="font-bold">8. DÉCLARATION DU BAILLEUR</h3>
-                            <p>Le Bailleur déclare être propriétaire du logement et en avoir la libre disposition et la pleine jouissance durant la période définie au paragraphe 3.</p>
                         </div>
                         <div class="contract-section">
@@ -515,7 +399,7 @@
         });
         document.getElementById('next-to-tenant').addEventListener('click', () => {
-            if (document.getElementById('owner-form').checkValidity()) {
                 calculatePrices();
                 showTab('tab2');
             } else {
@@ -528,8 +412,7 @@
         });
         document.getElementById('next-to-contract').addEventListener('click', () => {
-            if (document.getElementById('tenant-form').checkValidity()) {
-                calculateBalance();
                 generateContract();
                 showTab('tab3');
             } else {
@@ -560,6 +443,39 @@
             document.getElementById(`${tabName}-btn`).classList.remove('text-gray-500');
         }
         // Calculate rental prices when dates or rates change
         document.getElementById('rental-start').addEventListener('change', calculatePrices);
         document.getElementById('rental-end').addEventListener('change', calculatePrices);
@@ -603,16 +519,6 @@
             document.getElementById('balance-due').textContent = `${(totalPrice - depositAmount).toFixed(2)} €`;
         }
-        // Calculate balance due
-        function calculateBalance() {
-            const totalPrice = parseFloat(document.getElementById('total-price').textContent) || 0;
-            const depositAmount = parseFloat(document.getElementById('deposit-amount').value) || 0;
-            const balanceDue = totalPrice - depositAmount;
-            document.getElementById('deposit-display').textContent = `${depositAmount.toFixed(2)} €`;
-            document.getElementById('balance-due').textContent = `${balanceDue.toFixed(2)} €`;
-        }
         // Generate contract content
         function generateContract() {
             // Owner info
@@ -648,48 +554,28 @@
             document.getElementById('total-price-contract').textContent = document.getElementById('total-price').textContent;
             document.getElementById('deposit-amount-display').textContent = document.getElementById('deposit-amount').value;
-            document.getElementById('balance-due-display').textContent = document.getElementById('balance-due').textContent.split(' ')[0];
             // Contract date
             const today = new Date();
             document.getElementById('contract-date').textContent = today.toLocaleDateString('fr-FR', options);
         }
-        // Export to PDF
         document.getElementById('export-pdf').addEventListener('click', () => {
-            const { jsPDF } = window.jspdf;
-            const element = document.getElementById('contract-content');
-            html2canvas(element, {
-                scale: 2,
-                logging: false,
-                useCORS: true
-            }).then(canvas => {
-                const imgData = canvas.toDataURL('image/png');
-                const pdf = new jsPDF('p', 'mm', 'a4');
-                const imgWidth = 210; // A4 width in mm
-                const pageHeight = 295; // A4 height in mm
-                const imgHeight = canvas.height * imgWidth / canvas.width;
-                let heightLeft = imgHeight;
-                let position = 0;
-                pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
-                heightLeft -= pageHeight;
-                while (heightLeft >= 0) {
-                    position = heightLeft - imgHeight;
-                    pdf.addPage();
-                    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
-                    heightLeft -= pageHeight;
-                }
-                const fileName = `contrat_location_${document.getElementById('tenant-lastname').value}_${document.getElementById('rental-start').value}.pdf`;
-                pdf.save(fileName);
-            });
         });
-        // Export to Word
         document.getElementById('export-word').addEventListener('click', () => {
-            const contractContent = document.getElementById('contract-content').innerHTML;
-            const preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Contrat de location</title></head><body>`;
-            const postHtml = `<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=pointvirgule/easyloc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body></html>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>EasyLoc - Gestion des locations saisonnières</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .tab-active {
             color: #f97316;
             font-weight: 600;
         }
         .contract-section {
             margin-bottom: 1.5rem;
         }
         .bold-text {
             font-weight: bold;
         }
     </style>
 </head>
 <body class="bg-gray-50">
                     <i class="fas fa-home text-orange-500 text-4xl mr-3"></i>
                     <h1 class="text-3xl font-bold text-gray-800">Easy<span class="text-orange-500">Loc</span></h1>
                 </div>
+                <div class="bg-orange-100 text-orange-800 px-4 py-2 rounded-full text-sm font-medium">
                     <i class="fas fa-user-circle mr-2"></i>
+                    <span>Mon compte</span>
                 </div>
             </div>
             <p class="text-gray-600 mt-2">Gérez vos contrats de location saisonnière en toute simplicité</p>
         </header>
         <div class="bg-white rounded-xl shadow-md overflow-hidden">
             <!-- Navigation tabs -->
             <div class="border-b border-gray-200">
                         <div class="contract-section">
                             <h3 class="font-bold">8. DÉCLARATION DU BAILLEUR</h3>
+                            <p>Le Bailleur déclare être propriétaire du logement et en avoir la libre disposition et la pleine jouissance durant la période définite au paragraphe 3.</p>
                         </div>
                         <div class="contract-section">
         });
         document.getElementById('next-to-tenant').addEventListener('click', () => {
+            if (validateOwnerForm()) {
                 calculatePrices();
                 showTab('tab2');
             } else {
         });
         document.getElementById('next-to-contract').addEventListener('click', () => {
+            if (validateTenantForm()) {
                 generateContract();
                 showTab('tab3');
             } else {
             document.getElementById(`${tabName}-btn`).classList.remove('text-gray-500');
         }
+        // Form validation
+        function validateOwnerForm() {
+            const requiredFields = [
+                'owner-lastname', 'owner-firstname', 'owner-address',
+                'owner-phone', 'owner-email', 'property-address',
+                'rental-start', 'rental-end', 'daily-rate', 'cleaning-fee'
+            ];
+            for (const fieldId of requiredFields) {
+                const field = document.getElementById(fieldId);
+                if (!field.value.trim()) {
+                    field.focus();
+                    return false;
+                }
+            }
+            return true;
+        }
+        function validateTenantForm() {
+            const requiredFields = [
+                'tenant-lastname', 'tenant-firstname', 'tenant-phone', 'tenant-email'
+            ];
+            for (const fieldId of requiredFields) {
+                const field = document.getElementById(fieldId);
+                if (!field.value.trim()) {
+                    field.focus();
+                    return false;
+                }
+            }
+            return true;
+        }
         // Calculate rental prices when dates or rates change
         document.getElementById('rental-start').addEventListener('change', calculatePrices);
         document.getElementById('rental-end').addEventListener('change', calculatePrices);
             document.getElementById('balance-due').textContent = `${(totalPrice - depositAmount).toFixed(2)} €`;
         }
         // Generate contract content
         function generateContract() {
             // Owner info
             document.getElementById('total-price-contract').textContent = document.getElementById('total-price').textContent;
             document.getElementById('deposit-amount-display').textContent = document.getElementById('deposit-amount').value;
+            const balanceDue = parseFloat(document.getElementById('balance-due').textContent);
+            document.getElementById('balance-due-display').textContent = balanceDue.toFixed(2);
             // Contract date
             const today = new Date();
             document.getElementById('contract-date').textContent = today.toLocaleDateString('fr-FR', options);
         }
+        // Export to PDF (placeholder)
         document.getElementById('export-pdf').addEventListener('click', () => {
+            alert('Fonctionnalité PDF à implémenter');
         });
+        // Export to Word (placeholder)
         document.getElementById('export-word').addEventListener('click', () => {
+            alert('Fonctionnalité Word à implémenter');
+        });
+        // Save contract (placeholder)
+        document.getElementById('save-contract').addEventListener('click', () => {
+            alert('Contrat enregistré avec succès !');
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=pointvirgule/easyloc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>