commit bda22a043af3b237c38e7dfc94b1930d6876987d

Author: root <root@hub.scroll.pub> Date: 2024-12-28 21:17:49 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..32e8207 --- /dev/null +++ b/body.html @@ -0,0 +1,48 @@ +<header> + <h1>Calculateur de Crédit Immobilier</h1> + <p>Estimez vos mensualités, coûts d'intérêt et frais de notaire en quelques clics.</p> +</header> +<main> + <form id="creditForm"> + <label for="prixBien">Prix du bien (€):</label> + <input type="number" id="prixBien" required> + + <label for="apport">Apport personnel (€):</label> + <input type="number" id="apport" required> + + <label for="duree">Durée du crédit (années):</label> + <input type="number" id="duree" required> + + <div id="tauxContainer"> + <label>Taux d'intérêt (%):</label> + <div class="tauxInput"> + <input type="number" class="taux" step="0.01" required> + <button type="button" class="removeTaux">×</button> + </div> + </div> + <button type="button" id="addTaux">Ajouter un taux</button> + + <button type="submit">Calculer</button> + </form> + + <div id="results"> + <h2>Résultats Comparés</h2> + <table> + <thead> + <tr> + <th>Taux</th> + <th>Mensualité</th> + <th>Coût Intérêt</th> + <th>Frais Notaire</th> + <th>Total</th> + </tr> + </thead> + <tbody> + <!-- Results will be inserted here --> + </tbody> + </table> + </div> +</main> +<footer> + <p>Un outil simple pour vos projets immobiliers.</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..acafdc8 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://creditimmo.scroll.pub +metaTags +editButton /edit.html +title Calculateur de Crédit Immobilier en France +style.css +body.html +script.js \ No newline at end of file diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..f2b3965 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "7cde93eb-091a-4c57-aefe-4be48918ee38", + "object": "chat.completion", + "created": 1735420646, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\ncreditimmo.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://creditimmo.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Calculateur de Crédit Immobilier en France\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Calculateur de Crédit Immobilier</h1>\n <p>Estimez vos mensualités, coûts d'intérêt et frais de notaire en quelques clics.</p>\n</header>\n<main>\n <form id=\"creditForm\">\n <label for=\"prixBien\">Prix du bien (€):</label>\n <input type=\"number\" id=\"prixBien\" required>\n \n <label for=\"apport\">Apport personnel (€):</label>\n <input type=\"number\" id=\"apport\" required>\n \n <label for=\"duree\">Durée du crédit (années):</label>\n <input type=\"number\" id=\"duree\" required>\n \n <div id=\"tauxContainer\">\n <label>Taux d'intérêt (%):</label>\n <div class=\"tauxInput\">\n <input type=\"number\" class=\"taux\" step=\"0.01\" required>\n <button type=\"button\" class=\"removeTaux\">×</button>\n </div>\n </div>\n <button type=\"button\" id=\"addTaux\">Ajouter un taux</button>\n \n <button type=\"submit\">Calculer</button>\n </form>\n\n <div id=\"results\">\n <h2>Résultats Comparés</h2>\n <table>\n <thead>\n <tr>\n <th>Taux</th>\n <th>Mensualité</th>\n <th>Coût Intérêt</th>\n <th>Frais Notaire</th>\n <th>Total</th>\n </tr>\n </thead>\n <tbody>\n <!-- Results will be inserted here -->\n </tbody>\n </table>\n </div>\n</main>\n<footer>\n <p>Un outil simple pour vos projets immobiliers.</p>\n</footer>\n---style.css---\n:root {\n --primary: #2c3e50;\n --secondary: #3498db;\n --background: #ecf0f1;\n --text: #2c3e50;\n --accent: #e74c3c;\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n line-height: 1.6;\n color: var(--text);\n background-color: var(--background);\n margin: 0;\n padding: 20px;\n max-width: 800px;\n margin: 0 auto;\n}\n\nheader {\n text-align: center;\n margin-bottom: 2rem;\n}\n\nh1 {\n color: var(--primary);\n font-size: 2.5rem;\n}\n\nform {\n background: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n margin-bottom: 2rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput {\n width: 100%;\n padding: 0.75rem;\n margin-bottom: 1rem;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 1rem;\n}\n\nbutton {\n background-color: var(--secondary);\n color: white;\n border: none;\n padding: 0.75rem 1.5rem;\n border-radius: 4px;\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\n#tauxContainer {\n margin-bottom: 1rem;\n}\n\n.tauxInput {\n display: flex;\n gap: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.removeTaux {\n background-color: var(--accent);\n padding: 0 0.75rem;\n}\n\n#results {\n background: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin-top: 1rem;\n}\n\nth, td {\n padding: 1rem;\n text-align: center;\n border-bottom: 1px solid #ddd;\n}\n\nth {\n background-color: var(--primary);\n color: white;\n}\n\ntr:hover {\n background-color: #f5f5f5;\n}\n\n@media (max-width: 600px) {\n h1 {\n font-size: 2rem;\n }\n \n form, #results {\n padding: 1rem;\n }\n \n th, td {\n padding: 0.75rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const form = document.getElementById('creditForm');\n const tauxContainer = document.getElementById('tauxContainer');\n const resultsBody = document.querySelector('#results tbody');\n \n // Add taux input\n document.getElementById('addTaux').addEventListener('click', function() {\n const div = document.createElement('div');\n div.className = 'tauxInput';\n div.innerHTML = `\n <input type=\"number\" class=\"taux\" step=\"0.01\" required>\n <button type=\"button\" class=\"removeTaux\">×</button>\n `;\n tauxContainer.appendChild(div);\n \n // Remove taux input\n div.querySelector('.removeTaux').addEventListener('click', function() {\n div.remove();\n });\n });\n\n form.addEventListener('submit', function(e) {\n e.preventDefault();\n \n const prixBien = parseFloat(document.getElementById('prixBien').value);\n const apport = parseFloat(document.getElementById('apport').value);\n const duree = parseInt(document.getElementById('duree').value);\n const tauxInputs = document.querySelectorAll('.taux');\n \n // Clear previous results\n resultsBody.innerHTML = '';\n \n tauxInputs.forEach(input => {\n const taux = parseFloat(input.value) / 100;\n const montantEmprunte = prixBien - apport;\n const fraisNotaire = prixBien * 0.08; // 8% estimation\n \n // Calculate monthly payment\n const tauxMensuel = taux / 12;\n const nbMensualites = duree * 12;\n const mensualite = (montantEmprunte * tauxMensuel) / (1 - Math.pow(1 + tauxMensuel, -nbMensualites));\n \n // Calculate total interest\n const totalInteret = (mensualite * nbMensualites) - montantEmprunte;\n \n // Calculate total cost\n const total = montantEmprunte + totalInteret + fraisNotaire;\n \n // Format numbers\n const format = num => new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(num);\n \n // Add result to table\n const row = document.createElement('tr');\n row.innerHTML = `\n <td>${(taux * 100).toFixed(2)}%</td>\n <td>${format(mensualite)}</td>\n <td>${format(totalInteret)}</td>\n <td>${format(fraisNotaire)}</td>\n <td>${format(total)}</td>\n `;\n resultsBody.appendChild(row);\n });\n });\n});\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 320, + "completion_tokens": 1731, + "total_tokens": 2051, + "prompt_cache_hit_tokens": 64, + "prompt_cache_miss_tokens": 256 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..5a3e7a2 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# creditimmo2.scroll.pub +Website generated by DeepSeek from prompt: creer un site pour credit immo en france avec mensualité, cout interet, en estimant les frais notaire à partir du prix du bien,, apport. avec la possibilité de faire le calcul pour plusieurs taux simultanement avec une case pour chaque taux et comparer les resultats. soyez créatif et formatez les montants et utilisez un tableau pour les resultats \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..0dc7148 --- /dev/null +++ b/script.js @@ -0,0 +1,64 @@ +document.addEventListener('DOMContentLoaded', function() { + const form = document.getElementById('creditForm'); + const tauxContainer = document.getElementById('tauxContainer'); + const resultsBody = document.querySelector('#results tbody'); + + // Add taux input + document.getElementById('addTaux').addEventListener('click', function() { + const div = document.createElement('div'); + div.className = 'tauxInput'; + div.innerHTML = ` + <input type="number" class="taux" step="0.01" required> + <button type="button" class="removeTaux">×</button> + `; + tauxContainer.appendChild(div); + + // Remove taux input + div.querySelector('.removeTaux').addEventListener('click', function() { + div.remove(); + }); + }); + + form.addEventListener('submit', function(e) { + e.preventDefault(); + + const prixBien = parseFloat(document.getElementById('prixBien').value); + const apport = parseFloat(document.getElementById('apport').value); + const duree = parseInt(document.getElementById('duree').value); + const tauxInputs = document.querySelectorAll('.taux'); + + // Clear previous results + resultsBody.innerHTML = ''; + + tauxInputs.forEach(input => { + const taux = parseFloat(input.value) / 100; + const montantEmprunte = prixBien - apport; + const fraisNotaire = prixBien * 0.08; // 8% estimation + + // Calculate monthly payment + const tauxMensuel = taux / 12; + const nbMensualites = duree * 12; + const mensualite = (montantEmprunte * tauxMensuel) / (1 - Math.pow(1 + tauxMensuel, -nbMensualites)); + + // Calculate total interest + const totalInteret = (mensualite * nbMensualites) - montantEmprunte; + + // Calculate total cost + const total = montantEmprunte + totalInteret + fraisNotaire; + + // Format numbers + const format = num => new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(num); + + // Add result to table + const row = document.createElement('tr'); + row.innerHTML = ` + <td>${(taux * 100).toFixed(2)}%</td> + <td>${format(mensualite)}</td> + <td>${format(totalInteret)}</td> + <td>${format(fraisNotaire)}</td> + <td>${format(total)}</td> + `; + resultsBody.appendChild(row); + }); + }); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..50f2294 --- /dev/null +++ b/style.css @@ -0,0 +1,123 @@ +:root { + --primary: #2c3e50; + --secondary: #3498db; + --background: #ecf0f1; + --text: #2c3e50; + --accent: #e74c3c; +} + +body { + font-family: 'Segoe UI', sans-serif; + line-height: 1.6; + color: var(--text); + background-color: var(--background); + margin: 0; + padding: 20px; + max-width: 800px; + margin: 0 auto; +} + +header { + text-align: center; + margin-bottom: 2rem; +} + +h1 { + color: var(--primary); + font-size: 2.5rem; +} + +form { + background: white; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + margin-bottom: 2rem; +} + +label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; +} + +input { + width: 100%; + padding: 0.75rem; + margin-bottom: 1rem; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 1rem; +} + +button { + background-color: var(--secondary); + color: white; + border: none; + padding: 0.75rem 1.5rem; + border-radius: 4px; + cursor: pointer; + font-size: 1rem; + transition: background-color 0.3s; +} + +button:hover { + background-color: #2980b9; +} + +#tauxContainer { + margin-bottom: 1rem; +} + +.tauxInput { + display: flex; + gap: 0.5rem; + margin-bottom: 0.5rem; +} + +.removeTaux { + background-color: var(--accent); + padding: 0 0.75rem; +} + +#results { + background: white; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +table { + width: 100%; + border-collapse: collapse; + margin-top: 1rem; +} + +th, td { + padding: 1rem; + text-align: center; + border-bottom: 1px solid #ddd; +} + +th { + background-color: var(--primary); + color: white; +} + +tr:hover { + background-color: #f5f5f5; +} + +@media (max-width: 600px) { + h1 { + font-size: 2rem; + } + + form, #results { + padding: 1rem; + } + + th, td { + padding: 0.75rem; + } +} \ No newline at end of file