{"id":576,"date":"2024-01-05T14:32:37","date_gmt":"2024-01-05T14:32:37","guid":{"rendered":"https:\/\/bitscoresecurity.com\/?page_id=576"},"modified":"2024-01-09T05:37:06","modified_gmt":"2024-01-09T05:37:06","slug":"testing-2-mano","status":"publish","type":"page","link":"https:\/\/bitscoresecurity.com\/fr\/testing-2-mano\/","title":{"rendered":"Testing 2 mano"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\n\n \n \n Smart Security Quiz<\/title>\n <style>\n body, h2, button, .option label {\n -webkit-user-select: none; \/* Safari *\/\n -moz-user-select: none; \/* Firefox *\/\n -ms-user-select: none; \/* IE\/Edge *\/\n user-select: none; \/* Standard syntax *\/\n }\n\n body, h2, button {\n margin: 0;\n padding: 0;\n font-family: 'Roboto', sans-serif;\n }\n\n body {\n background-color: #080808; \/* Dark background *\/\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n\n .quiz-header {\n font-size: 32px;\n color: #27ae60; \/* Green *\/\n margin-bottom: 20px;\n }\n\n .quiz-question {\n font-size: 22px;\n color: #ecf0f1; \/* light white *\/\n margin-bottom: 30px;\n }\n\n .options-container {\n display: flex;\n justify-content: center;\n gap: 20px;\n flex-wrap: wrap;\n }\n\n .option {\n background: #1e272e;\n border-radius: 8px;\n padding: 20px 30px;\n width: 220px;\n height: 120px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);\n }\n\n .option:hover {\n transform: translateY(-5px);\n box-shadow: 0 0 20px #27ae60; \/* Green shadow on hover *\/\n }\n\n .option.selected {\n background-color: #2c3e50; \/* Slightly different background for selected option *\/\n color: #ecf0f1;\n box-shadow: 0 0 20px #27ae60; \/* Green shadow around the card for selected option *\/\n }\n\n .option input[type='radio'], .option input[type='checkbox'] {\n display: none;\n }\n\n .option label {\n font-size: 16px;\n cursor: pointer;\n color: #ecf0f1; \/* light white for option text *\/\n }\n\n .next-button {\n background-color: #333; \/* Darker button *\/\n color: #27ae60; \/* Green text *\/\n border: 2px solid #27ae60; \/* Green border *\/\n border-radius: 4px;\n padding: 10px 25px;\n font-size: 18px;\n cursor: pointer;\n margin-top: 40px;\n transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); \/* Subtle shadow for button *\/\n }\n\n .next-button:hover {\n background-color: #27ae60; \/* Green background on hover *\/\n color: #fff; \/* White text on hover *\/\n box-shadow: 0 2px 10px #27ae60; \/* Green shadow on hover *\/\n }\n\n @media (max-width: 768px) {\n .options-container {\n flex-direction: column;\n }\n\n .option {\n width: 80%;\n margin-bottom: 10px;\n }\n\n .next-button {\n width: 80%;\n }\n }\n\n \/* Style for the canvas *\/\n #particleCanvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n }\n <\/style>\n<\/head>\n<body>\n\n <canvas id=\"particleCanvas\"><\/canvas>\n\n <div class=\"quiz-header\">Smart Security Quiz<\/div>\n <div class=\"quiz-question\">In which type of area do you reside:<\/div>\n <div class=\"options-container\">\n <div class=\"option\">\n <input type=\"radio\" id=\"Commercial\" name=\"home-type\" \/>\n <label for=\"Commercial\">Commercial<\/label>\n <\/div>\n <div class=\"option\">\n <input type=\"radio\" id=\"Residential\" name=\"home-type\" \/>\n <label for=\"Residential\">Residential<\/label>\n <\/div>\n <\/div>\n\n <!-- Second question (hidden initially) -->\n <div class=\"quiz-question\" id=\"question2\" style=\"display: none;\">What features or attributes are you seeking in a home security system? (Select all that apply):<\/div>\n <div class=\"options-container\" id=\"options2\" style=\"display: none;\">\n <div class=\"option\">\n <input type=\"checkbox\" id=\"breakIns\" name=\"security-feature\" \/>\n <label for=\"breakIns\">Protect from: Break-ins<\/label>\n <\/div>\n <div class=\"option\">\n <input type=\"checkbox\" id=\"fireSafety\" name=\"security-feature\" \/>\n <label for=\"fireSafety\">Protect from: Fire Safety<\/label>\n <\/div>\n <\/div>\n\n <button class=\"next-button\">Next<\/button>\n\n <script>\n document.querySelectorAll('.option').forEach(option => {\n option.addEventListener('click', function () {\n if (this.querySelector('input[type=\"checkbox\"]')) {\n this.classList.toggle('selected');\n var checkbox = this.querySelector('input[type=\"checkbox\"]');\n checkbox.checked = !checkbox.checked;\n } else {\n document.querySelectorAll('.option').forEach(opt => opt.classList.remove('selected'));\n this.classList.add('selected');\n this.querySelector('input[type=\"radio\"]').checked = true;\n }\n });\n });\n\n document.querySelector('.next-button').addEventListener('click', function () {\n var selectedOption = document.querySelector('input[name=\"home-type\"]:checked');\n if (selectedOption) {\n document.querySelector('.quiz-question').style.display = 'none';\n document.querySelector('.options-container').style.display = 'none';\n document.getElementById('question2').style.display = 'block';\n document.getElementById('options2').style.display = 'flex';\n } else {\n alert(\"Please select an option before proceeding.\");\n }\n });\n\n \/* Existing particle canvas script *\/\n var canvas = document.getElementById('particleCanvas');\n var ctx = canvas.getContext('2d');\n var particles = [];\n var particleCount = 100;\n for (var i = 0; i < particleCount; i++) {\n particles.push({\n x: Math.random() * window.innerWidth,\n y: Math.random() * window.innerHeight,\n size: 1 + Math.random() * 2,\n speedX: (Math.random() - 0.5) * 0.5,\n speedY: (Math.random() - 0.5) * 0.5,\n });\n }\n function resizeCanvas() {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n }\n window.addEventListener('resize', resizeCanvas);\n resizeCanvas();\n function drawParticles() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = 'rgba(39, 174, 96, 0.7)';\n particles.forEach(function (p) {\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\n ctx.fill();\n });\n for (var i = 0; i < particles.length; i++) {\n for (var j = i + 1; j < particles.length; j++) {\n var dx = particles[i].x - particles[j].x;\n var dy = particles[i].y - particles[j].y;\n var distance = Math.sqrt(dx * dx + dy * dy);\n if (distance < 150) {\n ctx.beginPath();\n ctx.strokeStyle = 'rgba(39, 174, 96, 0.3)';\n ctx.moveTo(particles[i].x, particles[i].y);\n ctx.lineTo(particles[j].x, particles[j].y);\n ctx.stroke();\n }\n }\n }\n }\n function updateParticles() {\n particles.forEach(function (p) {\n p.x += p.speedX;\n p.y += p.speedY;\n if (p.x > canvas.width) p.x = 0;\n if (p.y > canvas.height) p.y = 0;\n if (p.x < 0) p.x = canvas.width;\n if (p.y < 0) p.y = canvas.height;\n });\n drawParticles();\n requestAnimationFrame(updateParticles);\n }\n updateParticles();\n <\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Smart Security Quiz Smart Security Quiz In which type of area do you reside: Commercial Residential What features or attributes are you seeking in a home security system? (Select all that apply): Protect from: Break-ins Protect from: Fire Safety Next<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":100,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-576","page","type-page","status-publish","hentry"],"coauthors":[],"author_meta":{"author_link":"https:\/\/bitscoresecurity.com\/fr\/author\/admin\/","display_name":"admin"},"relative_dates":{"created":"Posted 2 ann\u00e9es ago","modified":"Updated 2 ann\u00e9es ago"},"absolute_dates":{"created":"Posted on janvier 5, 2024","modified":"Updated on janvier 9, 2024"},"absolute_dates_time":{"created":"Posted on janvier 5, 2024 2:32 pm","modified":"Updated on janvier 9, 2024 5:37 am"},"featured_img_caption":"","featured_img":false,"series_order":"","_links":{"self":[{"href":"https:\/\/bitscoresecurity.com\/fr\/wp-json\/wp\/v2\/pages\/576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitscoresecurity.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bitscoresecurity.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bitscoresecurity.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bitscoresecurity.com\/fr\/wp-json\/wp\/v2\/comments?post=576"}],"version-history":[{"count":108,"href":"https:\/\/bitscoresecurity.com\/fr\/wp-json\/wp\/v2\/pages\/576\/revisions"}],"predecessor-version":[{"id":732,"href":"https:\/\/bitscoresecurity.com\/fr\/wp-json\/wp\/v2\/pages\/576\/revisions\/732"}],"wp:attachment":[{"href":"https:\/\/bitscoresecurity.com\/fr\/wp-json\/wp\/v2\/media?parent=576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}