commit 96c355104e8d7edf075dcc6d368aa44e289f4347

Author: root <root@hub.scroll.pub> Date: 2024-12-28 11:35:33 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..7b463d7 --- /dev/null +++ b/body.html @@ -0,0 +1,49 @@ +<header> + <h1>Simulateur de Prêt Immobilier</h1> + <p>Comparez les taux et calculez vos mensualités en quelques clics</p> +</header> + +<main> + <section class="calculator"> + <div class="form-group"> + <label for="amount">Montant du prêt (€)</label> + <input type="number" id="amount" min="10000" max="1000000" step="1000" value="200000"> + </div> + <div class="form-group"> + <label for="duration">Durée (années)</label> + <input type="number" id="duration" min="5" max="30" step="1" value="20"> + </div> + <div class="form-group"> + <label for="rate">Taux d'intérêt (%)</label> + <input type="number" id="rate" min="0.1" max="10" step="0.1" value="3.5"> + </div> + <button id="calculate">Calculer</button> + </section> + + <section class="results"> + <h2>Résultats</h2> + <div class="summary"> + <p>Mensualité : <span id="monthlyPayment">-</span> €</p> + <p>Coût total des intérêts : <span id="totalInterest">-</span> €</p> + </div> + <div class="comparison"> + <h3>Comparaison des taux</h3> + <table id="rateComparison"> + <thead> + <tr> + <th>Taux</th> + <th>Mensualité</th> + <th>Intérêts totaux</th> + </tr> + </thead> + <tbody> + <!-- Rows will be added dynamically --> + </tbody> + </table> + </div> + </section> +</main> + +<footer> + <p>Simulateur de prêt immobilier - Calculs indicatifs</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..c6c5396 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://pretimmobilier.scroll.pub +metaTags +editButton /edit.html +title Simulateur de Prêt 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..21355ea --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "895fd557-965e-4f91-a187-746caa5d1036", + "object": "chat.completion", + "created": 1735385710, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\npretimmobilier.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://pretimmobilier.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Simulateur de Prêt Immobilier en France\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Simulateur de Prêt Immobilier</h1>\n <p>Comparez les taux et calculez vos mensualités en quelques clics</p>\n</header>\n\n<main>\n <section class=\"calculator\">\n <div class=\"form-group\">\n <label for=\"amount\">Montant du prêt (€)</label>\n <input type=\"number\" id=\"amount\" min=\"10000\" max=\"1000000\" step=\"1000\" value=\"200000\">\n </div>\n <div class=\"form-group\">\n <label for=\"duration\">Durée (années)</label>\n <input type=\"number\" id=\"duration\" min=\"5\" max=\"30\" step=\"1\" value=\"20\">\n </div>\n <div class=\"form-group\">\n <label for=\"rate\">Taux d'intérêt (%)</label>\n <input type=\"number\" id=\"rate\" min=\"0.1\" max=\"10\" step=\"0.1\" value=\"3.5\">\n </div>\n <button id=\"calculate\">Calculer</button>\n </section>\n\n <section class=\"results\">\n <h2>Résultats</h2>\n <div class=\"summary\">\n <p>Mensualité : <span id=\"monthlyPayment\">-</span> €</p>\n <p>Coût total des intérêts : <span id=\"totalInterest\">-</span> €</p>\n </div>\n <div class=\"comparison\">\n <h3>Comparaison des taux</h3>\n <table id=\"rateComparison\">\n <thead>\n <tr>\n <th>Taux</th>\n <th>Mensualité</th>\n <th>Intérêts totaux</th>\n </tr>\n </thead>\n <tbody>\n <!-- Rows will be added dynamically -->\n </tbody>\n </table>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Simulateur de prêt immobilier - Calculs indicatifs</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --background-color: #f5f6fa;\n --text-color: #2c3e50;\n --border-radius: 8px;\n --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n margin: 0;\n padding: 20px;\n}\n\nheader {\n text-align: center;\n margin-bottom: 40px;\n}\n\nheader h1 {\n color: var(--primary-color);\n font-size: 2.5rem;\n margin-bottom: 10px;\n}\n\nheader p {\n color: #666;\n font-size: 1.1rem;\n}\n\n.calculator {\n background: white;\n padding: 25px;\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n max-width: 400px;\n margin: 0 auto 40px;\n}\n\n.form-group {\n margin-bottom: 20px;\n}\n\nlabel {\n display: block;\n margin-bottom: 5px;\n font-weight: 500;\n}\n\ninput {\n width: 100%;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: var(--border-radius);\n font-size: 1rem;\n}\n\nbutton {\n width: 100%;\n padding: 12px;\n background-color: var(--secondary-color);\n color: white;\n border: none;\n border-radius: var(--border-radius);\n font-size: 1rem;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\n.results {\n background: white;\n padding: 25px;\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n max-width: 800px;\n margin: 0 auto;\n}\n\n.summary {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20px;\n margin-bottom: 30px;\n}\n\n.summary p {\n background: var(--background-color);\n padding: 15px;\n border-radius: var(--border-radius);\n text-align: center;\n font-size: 1.1rem;\n}\n\n.summary span {\n font-weight: bold;\n color: var(--primary-color);\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin-top: 20px;\n}\n\nth, td {\n padding: 12px;\n text-align: center;\n border-bottom: 1px solid #ddd;\n}\n\nth {\n background-color: var(--primary-color);\n color: white;\n}\n\ntr:hover {\n background-color: #f5f5f5;\n}\n\nfooter {\n text-align: center;\n margin-top: 40px;\n color: #666;\n}\n\n@media (max-width: 600px) {\n .summary {\n grid-template-columns: 1fr;\n }\n \n header h1 {\n font-size: 2rem;\n }\n}\n---script.js---\nfunction calculateLoan(amount, duration, rate) {\n const monthlyRate = rate / 100 / 12;\n const numberOfPayments = duration * 12;\n \n const monthlyPayment = \n (amount * monthlyRate) / \n (1 - Math.pow(1 + monthlyRate, -numberOfPayments));\n \n const totalInterest = (monthlyPayment * numberOfPayments) - amount;\n \n return {\n monthly: monthlyPayment.toFixed(2),\n totalInterest: totalInterest.toFixed(2)\n };\n}\n\nfunction updateResults() {\n const amount = parseFloat(document.getElementById('amount').value);\n const duration = parseFloat(document.getElementById('duration').value);\n const rate = parseFloat(document.getElementById('rate').value);\n \n const result = calculateLoan(amount, duration, rate);\n \n document.getElementById('monthlyPayment').textContent = result.monthly;\n document.getElementById('totalInterest').textContent = result.totalInterest;\n \n updateComparisonTable(amount, duration);\n}\n\nfunction updateComparisonTable(amount, duration) {\n const tableBody = document.querySelector('#rateComparison tbody');\n tableBody.innerHTML = '';\n \n const rates = [2.5, 3.0, 3.5, 4.0, 4.5];\n \n rates.forEach(rate => {\n const result = calculateLoan(amount, duration, rate);\n \n const row = document.createElement('tr');\n row.innerHTML = `\n <td>${rate}%</td>\n <td>${result.monthly} €</td>\n <td>${result.totalInterest} €</td>\n `;\n \n tableBody.appendChild(row);\n });\n}\n\ndocument.getElementById('calculate').addEventListener('click', updateResults);\n\n// Initial calculation\nupdateResults();\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 297, + "completion_tokens": 1652, + "total_tokens": 1949, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 297 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..143bad6 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# pretimmobilier2.scroll.pub +Website generated by DeepSeek from prompt: creer un site pour simuler un emprunt de credit immobilier en france avec la possibilité d'entrer plus taux et de les comparer sous forme de tableau. sois créatif avec un design joli et mis en forme pour les montants et avoir le coût des intérêt aussi \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..cd3ae46 --- /dev/null +++ b/script.js @@ -0,0 +1,53 @@ +function calculateLoan(amount, duration, rate) { + const monthlyRate = rate / 100 / 12; + const numberOfPayments = duration * 12; + + const monthlyPayment = + (amount * monthlyRate) / + (1 - Math.pow(1 + monthlyRate, -numberOfPayments)); + + const totalInterest = (monthlyPayment * numberOfPayments) - amount; + + return { + monthly: monthlyPayment.toFixed(2), + totalInterest: totalInterest.toFixed(2) + }; +} + +function updateResults() { + const amount = parseFloat(document.getElementById('amount').value); + const duration = parseFloat(document.getElementById('duration').value); + const rate = parseFloat(document.getElementById('rate').value); + + const result = calculateLoan(amount, duration, rate); + + document.getElementById('monthlyPayment').textContent = result.monthly; + document.getElementById('totalInterest').textContent = result.totalInterest; + + updateComparisonTable(amount, duration); +} + +function updateComparisonTable(amount, duration) { + const tableBody = document.querySelector('#rateComparison tbody'); + tableBody.innerHTML = ''; + + const rates = [2.5, 3.0, 3.5, 4.0, 4.5]; + + rates.forEach(rate => { + const result = calculateLoan(amount, duration, rate); + + const row = document.createElement('tr'); + row.innerHTML = ` + <td>${rate}%</td> + <td>${result.monthly} €</td> + <td>${result.totalInterest} €</td> + `; + + tableBody.appendChild(row); + }); +} + +document.getElementById('calculate').addEventListener('click', updateResults); + +// Initial calculation +updateResults(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a8ab28e --- /dev/null +++ b/style.css @@ -0,0 +1,142 @@ +:root { + --primary-color: #2c3e50; + --secondary-color: #3498db; + --background-color: #f5f6fa; + --text-color: #2c3e50; + --border-radius: 8px; + --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +body { + font-family: 'Segoe UI', sans-serif; + line-height: 1.6; + color: var(--text-color); + background-color: var(--background-color); + margin: 0; + padding: 20px; +} + +header { + text-align: center; + margin-bottom: 40px; +} + +header h1 { + color: var(--primary-color); + font-size: 2.5rem; + margin-bottom: 10px; +} + +header p { + color: #666; + font-size: 1.1rem; +} + +.calculator { + background: white; + padding: 25px; + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + max-width: 400px; + margin: 0 auto 40px; +} + +.form-group { + margin-bottom: 20px; +} + +label { + display: block; + margin-bottom: 5px; + font-weight: 500; +} + +input { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: var(--border-radius); + font-size: 1rem; +} + +button { + width: 100%; + padding: 12px; + background-color: var(--secondary-color); + color: white; + border: none; + border-radius: var(--border-radius); + font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s; +} + +button:hover { + background-color: #2980b9; +} + +.results { + background: white; + padding: 25px; + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + max-width: 800px; + margin: 0 auto; +} + +.summary { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + margin-bottom: 30px; +} + +.summary p { + background: var(--background-color); + padding: 15px; + border-radius: var(--border-radius); + text-align: center; + font-size: 1.1rem; +} + +.summary span { + font-weight: bold; + color: var(--primary-color); +} + +table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; +} + +th, td { + padding: 12px; + text-align: center; + border-bottom: 1px solid #ddd; +} + +th { + background-color: var(--primary-color); + color: white; +} + +tr:hover { + background-color: #f5f5f5; +} + +footer { + text-align: center; + margin-top: 40px; + color: #666; +} + +@media (max-width: 600px) { + .summary { + grid-template-columns: 1fr; + } + + header h1 { + font-size: 2rem; + } +} \ No newline at end of file