{"id":80,"date":"2025-06-03T21:11:31","date_gmt":"2025-06-03T19:11:31","guid":{"rendered":"https:\/\/letoitdetito.fr\/?page_id=80"},"modified":"2025-06-03T21:16:40","modified_gmt":"2025-06-03T19:16:40","slug":"configurateur-pergola","status":"publish","type":"page","link":"https:\/\/letoitdetito.fr\/index.php\/configurateur-pergola\/","title":{"rendered":"Configurateur de Pergola"},"content":{"rendered":"<!-- Configurateur de Pergola - Version HTML directe -->\n<div class=\"configurateur-pergola-wrapper\" style=\"max-width: 1200px; margin: 20px auto; padding: 20px;\">\n    \n    <!-- Message de succ\u00e8s -->\n    <div style=\"background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: white; padding: 30px; border-radius: 15px; text-align: center; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);\">\n        <h1 style=\"font-size: 2.5rem; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\">\ud83c\udf89 Configurateur de Pergola<\/h1>\n        <p style=\"font-size: 1.2rem; margin-bottom: 20px;\">Votre configurateur de pergola sur mesure est maintenant fonctionnel !<\/p>\n        \n        <div style=\"background: rgba(255,255,255,0.1); border-radius: 10px; padding: 20px; margin: 20px 0;\">\n            <h2>\u2705 Status du syst\u00e8me<\/h2>\n            <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 15px 0;\">\n                <div style=\"background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px;\">\n                    <strong>\ud83d\udd0c Plugin<\/strong><br>\n                    <span style=\"color: #90EE90;\">Actif<\/span>\n                <\/div>\n                <div style=\"background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px;\">\n                    <strong>\ud83d\udcc4 Page<\/strong><br>\n                    <span style=\"color: #90EE90;\">Cr\u00e9\u00e9e<\/span>\n                <\/div>\n                <div style=\"background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px;\">\n                    <strong>\ud83d\udd17 URL<\/strong><br>\n                    <span style=\"color: #90EE90;\">Fonctionnelle<\/span>\n                <\/div>\n                <div style=\"background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px;\">\n                    <strong>\ud83d\udee1\ufe0f SSL<\/strong><br>\n                    <span style=\"color: #90EE90;\">S\u00e9curis\u00e9<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Interface de configuration -->\n    <div style=\"background: white; border-radius: 15px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);\">\n        <h2 style=\"color: #333; margin-bottom: 20px; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px;\">\ud83c\udfd7\ufe0f Configuration de la Pergola<\/h2>\n        \n        <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0;\">\n            <div>\n                <label style=\"display: block; font-weight: bold; margin-bottom: 8px; color: #2d3748;\">Longueur (cm)<\/label>\n                <select id=\"pergola-length\" style=\"width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 16px;\">\n                    <option value=\"300\">300 cm<\/option>\n                    <option value=\"400\">400 cm<\/option>\n                    <option value=\"500\">500 cm<\/option>\n                    <option value=\"600\" selected>600 cm<\/option>\n                    <option value=\"700\">700 cm<\/option>\n                    <option value=\"800\">800 cm<\/option>\n                    <option value=\"900\">900 cm<\/option>\n                    <option value=\"1000\">1000 cm<\/option>\n                <\/select>\n            <\/div>\n            \n            <div>\n                <label style=\"display: block; font-weight: bold; margin-bottom: 8px; color: #2d3748;\">Profondeur (cm)<\/label>\n                <select id=\"pergola-depth\" style=\"width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 16px;\">\n                    <option value=\"200\">200 cm<\/option>\n                    <option value=\"250\">250 cm<\/option>\n                    <option value=\"300\">300 cm<\/option>\n                    <option value=\"350\">350 cm<\/option>\n                    <option value=\"400\" selected>400 cm<\/option>\n                    <option value=\"450\">450 cm<\/option>\n                    <option value=\"500\">500 cm<\/option>\n                <\/select>\n            <\/div>\n            \n            <div>\n                <label style=\"display: block; font-weight: bold; margin-bottom: 8px; color: #2d3748;\">Mat\u00e9riau<\/label>\n                <select id=\"pergola-material\" style=\"width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 16px;\">\n                    <option value=\"pin\">Pin trait\u00e9<\/option>\n                    <option value=\"chene\" selected>Ch\u00eane<\/option>\n                    <option value=\"douglas\">Douglas<\/option>\n                    <option value=\"aluminium\">Aluminium<\/option>\n                <\/select>\n            <\/div>\n            \n            <div>\n                <label style=\"display: block; font-weight: bold; margin-bottom: 8px; color: #2d3748;\">Couverture<\/label>\n                <select id=\"pergola-roofing\" style=\"width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 16px;\">\n                    <option value=\"polycarbonate\" selected>Polycarbonate transparent<\/option>\n                    <option value=\"polycarbonate-opaque\">Polycarbonate opaque<\/option>\n                    <option value=\"verre\">Verre<\/option>\n                    <option value=\"bac-acier\">Bac acier<\/option>\n                <\/select>\n            <\/div>\n        <\/div>\n\n        <!-- Sp\u00e9cifications calcul\u00e9es -->\n        <div style=\"background: #f7fafc; border-radius: 10px; padding: 20px; margin: 20px 0;\">\n            <h3 style=\"color: #2d3748; margin-bottom: 15px;\">\ud83d\udccb Sp\u00e9cifications<\/h3>\n            <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;\">\n                <div><strong>Nombre de poteaux:<\/strong> <span id=\"posts-count\">3<\/span><\/div>\n                <div><strong>Hauteur poteaux:<\/strong> <span id=\"posts-height\">240 cm<\/span><\/div>\n                <div><strong>Traverses de toit:<\/strong> <span id=\"roof-beams\">7<\/span><\/div>\n                <div><strong>Surface couverte:<\/strong> <span id=\"surface\">24 m\u00b2<\/span><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Prix -->\n        <div style=\"background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white; border-radius: 10px; padding: 20px; text-align: center; margin: 20px 0;\">\n            <h3 style=\"margin-bottom: 10px;\">\ud83d\udcb0 Prix estim\u00e9<\/h3>\n            <div style=\"font-size: 2rem; font-weight: bold; margin-bottom: 5px;\" id=\"price\">2 850 \u20ac<\/div>\n            <p style=\"font-size: 0.9rem; opacity: 0.9;\">Prix indicatif TTC, hors pose<\/p>\n        <\/div>\n\n        <!-- Boutons d'action -->\n        <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0;\">\n            <button onclick=\"updateSpecs()\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 15px 20px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.3s ease;\">\n                \ud83d\udd04 Mettre \u00e0 jour\n            <\/button>\n            <button onclick=\"alert('Visualisation 3D bient\u00f4t disponible !')\" style=\"background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border: none; padding: 15px 20px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.3s ease;\">\n                \ud83c\udfae Vue 3D\n            <\/button>\n            <button onclick=\"alert('R\u00e9alit\u00e9 augment\u00e9e bient\u00f4t disponible !')\" style=\"background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: white; border: none; padding: 15px 20px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.3s ease;\">\n                \ud83d\udcf1 R\u00e9alit\u00e9 AR\n            <\/button>\n            <button onclick=\"downloadConfig()\" style=\"background: #e2e8f0; color: #4a5568; border: none; padding: 15px 20px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.3s ease;\">\n                \ud83d\udcbe T\u00e9l\u00e9charger devis\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Informations techniques -->\n    <div style=\"background: #2d3748; color: white; border-radius: 15px; padding: 20px; margin-top: 20px;\">\n        <h3 style=\"margin-bottom: 15px;\">\ud83d\udee0\ufe0f Informations techniques<\/h3>\n        <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; font-size: 14px;\">\n            <div><strong>URL:<\/strong> letoitdetito.fr\/configurateur-pergola\/<\/div>\n            <div><strong>Version:<\/strong> 1.0.0<\/div>\n            <div><strong>Statut:<\/strong> <span style=\"color: #48bb78;\">\u2705 Fonctionnel<\/span><\/div>\n            <div><strong>Mode:<\/strong> HTML Direct<\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\nfunction updateSpecs() {\n    const length = parseInt(document.getElementById('pergola-length').value);\n    const depth = parseInt(document.getElementById('pergola-depth').value);\n    const material = document.getElementById('pergola-material').value;\n    const roofing = document.getElementById('pergola-roofing').value;\n    \n    \/\/ Calculs selon vos sp\u00e9cifications\n    const numPosts = length <= 500 ? 2 : 3;\n    const heightDrop = depth * 0.15;\n    let postHeight = 270 - heightDrop;\n    if (postHeight < 240) postHeight = 240;\n    \n    const numRoofBeams = Math.floor(length \/ 100) + 1;\n    const surface = (length * depth) \/ 10000;\n    \n    \/\/ Prix\n    const materialMultipliers = {pin: 1.0, chene: 1.3, douglas: 1.1, aluminium: 1.8};\n    const roofingMultipliers = {polycarbonate: 1.0, 'polycarbonate-opaque': 1.1, verre: 1.5, 'bac-acier': 0.8};\n    const basePrice = 1200 + (surface * 45);\n    const totalPrice = Math.round(basePrice * materialMultipliers[material] * roofingMultipliers[roofing]);\n    \n    \/\/ Mise \u00e0 jour de l'affichage\n    document.getElementById('posts-count').textContent = numPosts;\n    document.getElementById('posts-height').textContent = Math.round(postHeight) + ' cm';\n    document.getElementById('roof-beams').textContent = numRoofBeams;\n    document.getElementById('surface').textContent = surface.toFixed(1) + ' m\u00b2';\n    document.getElementById('price').textContent = totalPrice.toLocaleString('fr-FR') + ' \u20ac';\n    \n    console.log('\ud83c\udfd7\ufe0f Pergola configur\u00e9e:', {length, depth, material, roofing, numPosts, postHeight, surface, totalPrice});\n}\n\nfunction downloadConfig() {\n    const config = {\n        length: document.getElementById('pergola-length').value,\n        depth: document.getElementById('pergola-depth').value,\n        material: document.getElementById('pergola-material').value,\n        roofing: document.getElementById('pergola-roofing').value,\n        posts: document.getElementById('posts-count').textContent,\n        height: document.getElementById('posts-height').textContent,\n        beams: document.getElementById('roof-beams').textContent,\n        surface: document.getElementById('surface').textContent,\n        price: document.getElementById('price').textContent\n    };\n    \n    const dataStr = JSON.stringify(config, null, 2);\n    const dataBlob = new Blob([dataStr], {type: 'application\/json'});\n    const url = URL.createObjectURL(dataBlob);\n    const link = document.createElement('a');\n    link.href = url;\n    link.download = 'pergola-config.json';\n    link.click();\n    URL.revokeObjectURL(url);\n}\n\n\/\/ Mise \u00e0 jour automatique\n['pergola-length', 'pergola-depth', 'pergola-material', 'pergola-roofing'].forEach(id => {\n    document.getElementById(id).addEventListener('change', updateSpecs);\n});\n\n\/\/ Initialisation\ndocument.addEventListener('DOMContentLoaded', updateSpecs);\n\nconsole.log('\ud83c\udf89 Configurateur de Pergola charg\u00e9 avec succ\u00e8s !');\n<\/script>\n\n<style>\nbutton:hover {\n    transform: translateY(-2px) !important;\n    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;\n}\n<\/style>","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf89 Configurateur de Pergola Votre configurateur de pergola sur mesure est maintenant fonctionnel ! \u2705 Status du syst\u00e8me \ud83d\udd0c Plugin Actif \ud83d\udcc4 Page Cr\u00e9\u00e9e \ud83d\udd17 URL Fonctionnelle \ud83d\udee1\ufe0f SSL S\u00e9curis\u00e9 \ud83c\udfd7\ufe0f Configuration de la Pergola Longueur (cm) 300 cm400 cm500 cm600 cm700 cm800 cm900 cm1000 cm Profondeur (cm) 200 cm250 cm300 cm350 cm400 cm450 cm500 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank","meta":{"footnotes":""},"class_list":["post-80","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/letoitdetito.fr\/index.php\/wp-json\/wp\/v2\/pages\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/letoitdetito.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/letoitdetito.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/letoitdetito.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/letoitdetito.fr\/index.php\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":2,"href":"https:\/\/letoitdetito.fr\/index.php\/wp-json\/wp\/v2\/pages\/80\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/letoitdetito.fr\/index.php\/wp-json\/wp\/v2\/pages\/80\/revisions\/83"}],"wp:attachment":[{"href":"https:\/\/letoitdetito.fr\/index.php\/wp-json\/wp\/v2\/media?parent=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}