{"id":294,"date":"2024-11-14T04:36:29","date_gmt":"2024-11-14T04:36:29","guid":{"rendered":"https:\/\/ichelnewsnetwork.com\/Ichel\/?page_id=294"},"modified":"2024-11-14T04:36:29","modified_gmt":"2024-11-14T04:36:29","slug":"signup","status":"publish","type":"page","link":"https:\/\/ichelnewsnetwork.com\/index.php\/signup\/","title":{"rendered":"SignUp"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"294\" class=\"elementor elementor-294\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5bbf312 e-flex e-con-boxed e-con e-parent\" data-id=\"5bbf312\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e8f3128 elementor-widget elementor-widget-heading\" data-id=\"e8f3128\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Join Ichel News Network by choosing one of the subscription plans below to stay updated with the latest news.\n<\/p>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f6aba8b e-flex e-con-boxed e-con e-parent\" data-id=\"f6aba8b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-180fd18 elementor-widget elementor-widget-heading\" data-id=\"180fd18\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Already subscribed? <a href=\"https:\/\/ichelnewsnetwork.com\/Ichel\/index.php\/login\/\">Login here<\/a>.\n<\/h4>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e2413b2 e-flex e-con-boxed e-con e-parent\" data-id=\"e2413b2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38934f9 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"38934f9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n  <style>\r\n\r\n.form-container {\r\n  background: #fff;\r\n  padding: 20px;\r\n  border-radius: 8px;\r\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\r\n  width: 300px;\r\n}\r\n\r\nform {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.form-step {\r\n  display: none;\r\n  flex-direction: column;\r\n}\r\n\r\n.form-step.active {\r\n  display: flex;\r\n}\r\n\r\ninput[type=\"text\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"email\"] {\r\n  margin: 10px 0;\r\n  padding: 10px;\r\n  border: 1px solid #ddd;\r\n  border-radius: 4px;\r\n}\r\n\r\nbutton {\r\n  background: #007bff;\r\n  color: #fff;\r\n  border: none;\r\n  padding: 10px;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  margin-top: 10px;\r\n}\r\n\r\nbutton:hover {\r\n  background: #0056b3;\r\n}\r\n\r\n.card-container {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 15px;\r\n}\r\n\r\n.card {\r\n  border: 1px solid #ddd;\r\n  border-radius: 8px;\r\n  padding: 5px 5px;\r\n  text-align: left;\r\n  width: calc(50% - 10px);\r\n  background: #f9f9f9;\r\n  display: block;\r\n  align-items: flex-start;\r\n}\r\n\r\n.card input {\r\n  margin-right: 10px;\r\n  margin-top: 4px;\r\n}\r\n\r\n.card label {\r\n  cursor: pointer;\r\n  display: ruby;\r\n  flex-grow: 1;\r\n}\r\n\r\n.inline {\r\n  display: flex;\r\n  align-items: center;\r\n  font-size: 16px;\r\n  font-weight: bold;\r\n}\r\n\r\n.details {\r\n  margin-top: 5px;\r\n  font-size: 13px;\r\n  color: #555;\r\n}\r\n\r\n.card:hover {\r\n  background: #f1f1f1;\r\n}\r\n\r\n.card input:checked + label {\r\n  border-left: 3px solid #007bff;\r\n  padding-left: 10px;\r\n}\r\n\r\n.selected-plan-container {\r\n  display: inline-flex\r\n;\r\n    align-items: center;\r\n    gap: 0px;\r\n    flex-wrap: nowrap;\r\n    justify-content: center;\r\n}\r\n\r\n.selected-plan-container p {\r\n  margin: 0; \/* Remove margin for proper alignment *\/\r\n  font-weight: bold;\r\n}\r\n\r\n.selected-plan-container ul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  display: flex;\r\n  gap: 5px; \/* Optional spacing between list items *\/\r\n}\r\n\r\n\r\n\r\n  <\/style>\r\n  \r\n  <div class=\"form-container\">\r\n    <form id=\"multiStepForm\" action=\"https:\/\/ichelnewsnetwork.com\/Ichel\/pay\/\" method=\"POST\">\r\n\r\n\r\n      <!-- Step 1 -->\r\n      <div class=\"form-step active\" id=\"step1\">\r\n        <h2>Select Subscription<\/h2>\r\n        <div class=\"card-container\">\r\n          <div class=\"card\">\r\n            <input type=\"radio\" id=\"daily\" name=\"subscription\" value=\"10\" data-plan=\"Daily\" required>\r\n            <label for=\"daily\">\r\n              <div class=\"inline\">\r\n                <span>Daily<\/span>\r\n                <\/div>\r\n                <\/label>\r\n                <div class=\"details\">\r\n                  <p>Price: Rs.10<\/p>\r\n                  <p>Duration: 1 Day<\/p>\r\n                <\/div>\r\n              <\/div>\r\n          <div class=\"card\">\r\n            <input type=\"radio\" id=\"weekly\" name=\"subscription\" value=\"70\" data-plan=\"Weekly\">\r\n            <label for=\"weekly\">\r\n              <div class=\"inline\">\r\n                <span>Weekly<\/span>\r\n                <\/div>\r\n            <\/label>\r\n                <div class=\"details\">\r\n                  <p>Price: Rs.50<\/p>\r\n                  <p>Duration: 7 Days<\/p>\r\n                <\/div>\r\n              \r\n          <\/div>\r\n          <div class=\"card\">\r\n            <input type=\"radio\" id=\"monthly\" name=\"subscription\" value=\"200\" data-plan=\"Monthly\">\r\n            <label for=\"monthly\">\r\n              <div class=\"inline\">\r\n                <span>Monthly<\/span>\r\n                <\/div>\r\n            <\/label>\r\n                <div class=\"details\">\r\n                  <p>Price: Rs.100<\/p>\r\n                  <p>Duration: 1 Month<\/p>\r\n                <\/div>\r\n              \r\n          <\/div>\r\n          <div class=\"card\">\r\n            <input type=\"radio\" id=\"annually\" name=\"subscription\" value=\"2000\" data-plan=\"Annually\">\r\n            <label for=\"annually\">\r\n              <div class=\"inline\">\r\n                <span>Annually<\/span>\r\n                <\/div>\r\n            <\/label>\r\n                <div class=\"details\">\r\n                  <p>Price: Rs.500<\/p>\r\n                  <p>Duration: 1 Year<\/p>\r\n                <\/div>\r\n              \r\n          <\/div>\r\n        <\/div>\r\n        <button type=\"button\" class=\"next-step\">Next<\/button>\r\n      <\/div>\r\n\r\n      <!-- Other Steps -->\r\n      <div class=\"form-step\" id=\"step2\">\r\n        <h2>Sign Up<\/h2>\r\n        <input type=\"text\" name=\"username\" placeholder=\"Username\" required>\r\n        <input type=\"password\" name=\"password\" placeholder=\"Password\" required>\r\n        <input type=\"tel\" name=\"mobileno\" placeholder=\"Mobile Number\" required>\r\n        <input type=\"email\" name=\"email\" placeholder=\"Email\" required>\r\n        <button type=\"button\" class=\"prev-step\">Back<\/button>\r\n        <button type=\"button\" class=\"next-step\">Next<\/button>\r\n      <\/div>\r\n      <div class=\"form-step\" id=\"step3\">\r\n          <h2>Payment<\/h2>\r\n          <div class=\"selected-plan-container\">\r\n            <p>Selected Plan:<\/p>\r\n            <ul id=\"selected-plans\"><\/ul>\r\n          <\/div>\r\n          <p>Total Price: Rs.<span id=\"total-price\">0<\/span><\/p>\r\n          <button type=\"button\" class=\"prev-step\">Back<\/button>\r\n          <button type=\"submit\">Pay Now<\/button>\r\n        <\/div>\r\n\r\n    <\/form>\r\n  <\/div>\r\n  <script>\r\n     document.addEventListener(\"DOMContentLoaded\", () => {\r\n  const form = document.getElementById(\"multiStepForm\");\r\n  const steps = Array.from(form.querySelectorAll(\".form-step\"));\r\n  const totalPriceElement = document.getElementById(\"total-price\");\r\n  const selectedPlansList = document.getElementById(\"selected-plans\");\r\n\r\n  let currentStep = 0;\r\n\r\n  const showStep = (step) => {\r\n    steps.forEach((el, index) => {\r\n      el.classList.toggle(\"active\", index === step);\r\n    });\r\n  };\r\n\r\n  const calculateTotal = () => {\r\n    const selectedSubscriptions = form.querySelectorAll(\r\n      'input[name=\"subscription\"]:checked'\r\n    );\r\n\r\n    let total = 0;\r\n    let plans = [];\r\n\r\n    selectedSubscriptions.forEach((subscription) => {\r\n      const price = parseInt(subscription.value, 10);\r\n      const plan = subscription.getAttribute(\"data-plan\");\r\n\r\n      total += price;\r\n      plans.push(plan);\r\n    });\r\n\r\n    totalPriceElement.textContent = total;\r\n    selectedPlansList.innerHTML = plans\r\n      .map((plan) => `<li>${plan}<\/li>`)\r\n      .join(\"\");\r\n  };\r\n\r\n  const nextStep = () => {\r\n    if (currentStep === 0) {\r\n      \/\/ Ensure at least one subscription is selected\r\n      const selectedSubscriptions = form.querySelectorAll(\r\n        'input[name=\"subscription\"]:checked'\r\n      );\r\n\r\n      if (selectedSubscriptions.length === 0) {\r\n        alert(\"Please select at least one subscription plan!\");\r\n        return;\r\n      }\r\n\r\n      \/\/ Calculate total and show plans in step 3\r\n      calculateTotal();\r\n    }\r\n\r\n    if (currentStep < steps.length - 1) {\r\n      currentStep++;\r\n      showStep(currentStep);\r\n    }\r\n  };\r\n\r\n  const prevStep = () => {\r\n    if (currentStep > 0) {\r\n      currentStep--;\r\n      showStep(currentStep);\r\n    }\r\n  };\r\n\r\n  form.addEventListener(\"click\", (e) => {\r\n    if (e.target.classList.contains(\"next-step\")) {\r\n      nextStep();\r\n    } else if (e.target.classList.contains(\"prev-step\")) {\r\n      prevStep();\r\n    }\r\n  });\r\n\r\n  showStep(currentStep);\r\n});\r\n\r\n\r\n  <\/script>\r\n\r\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>Join Ichel News Network by choosing one of the subscription plans below to stay updated with the latest news. Already subscribed? Login here. Select Subscription Daily Price: Rs.10 Duration: 1 &hellip; <a href=\"https:\/\/ichelnewsnetwork.com\/index.php\/signup\/\" class=\"more-link\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-294","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/ichelnewsnetwork.com\/index.php\/wp-json\/wp\/v2\/pages\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ichelnewsnetwork.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ichelnewsnetwork.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ichelnewsnetwork.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ichelnewsnetwork.com\/index.php\/wp-json\/wp\/v2\/comments?post=294"}],"version-history":[{"count":0,"href":"https:\/\/ichelnewsnetwork.com\/index.php\/wp-json\/wp\/v2\/pages\/294\/revisions"}],"wp:attachment":[{"href":"https:\/\/ichelnewsnetwork.com\/index.php\/wp-json\/wp\/v2\/media?parent=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}