JezK

Edit File: index.php

<?php
require_once('../wp-load.php'); ?>
<?php

define('WP_USE_THEMES', false);
require('../wp-blog-header.php');
get_header(); //Include header
?>
<?php
include '../events/db_connection.php';
?>

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="membership_styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <title> Membership </title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <link rel="stylesheet" href="./bootstrap.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

</head>
<style>
    .loaderLottie {
        position: absolute;
        top: 35%;
        height: 150px;
    }

#overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        /* Transparent black overlay */
        display: none;
        /* Initially hidden */
        z-index: 9999;
        /* Make sure the overlay appears on top */
    }

.buttons:hover {
        color: #fff !important;
    }

.buttons:focus {
        color: #fff !important;
    }

a {
        text-decoration: none;
    }
.ast-builder-html-element p{
margin: 0 !important;
padding-top: 5px;
}
.ast-builder-html-element p a{
color: white;
}
    .buttons:hover {
        color: #fff !important;
        background-color: #00bfc7;
    }

@media only screen and (min-width: 1px) and (max-width: 600px) {
        .header {
            background-color: #323232;
            color: white;
            padding: 20px 10px !important;
        }

.list-items {
            display: block !important;
            ;
        }
    }
</style>

<body>
    <div>
        <div class="header">
            <div class="container">
                <h1>Membership</h1>
                <p class="header-para">Membership of REIA is open to public and private entities operating in the rare-earth value chain. Membership fees are based on the size, turnover and scope of the organisation requesting the membership
                </p>
            </div>
        </div>
        <div class="container">
            
            <div class="apply-membership">
                <p>Apply for membership in REIA by completing the online application form. Applications are subject to the decision of the REIA Board of Directors and approval by the REIA General Assembly. For more information, contact the Secretariat at <a class="text-nowrap" href="mailto:info@global-reia.org"> info@global-reia.org. </a>
                </p>
                <button class="buttons" onclick="scrooldiv()">Apply for membership <img src="./right-arrow.png" class="ml-2"></button>
            </div>
            <div class="membership" style="text-align: left;">
                <h3><b>Join Us</b></h3>
                <p>REIA members are drawn from across the global rare-earth value chain, and include public and private companies, academic institutions, non-governmental organisations and other stakeholders</p>
                <p> REIA’s membership development is in line with the Association’s constitutional documents, with the goal of a balanced membership across various nodes of the global value chain, as well as industry sectors, countries and geographic regions. Aspiring members should be aligned with REIA’s core values of transparency and sustainability. Commitments to provide in-kind contributions such as the sharing of intelligence and/or human resources via committee participation etc. are expected to be honoured. </p>
                
            </div>

<!-- <div class="membership">
                <h3><b>The REIA management have the strategic target to grow its member base</b></h3>
                <p> into a balanced-out projection of global REE products related value chains, including e.g. following
                    products:</p>
                <div class="list-items">
                    <div>
                        <ul>
                            <li>materials for permanent magnets</li>
                            <li>lighting materials</li>
                        </ul>
                    </div>
                    <div>
                        <ul>
                            <li>lighting materials</li>
                            <li>glass & ceramics</li>
                        </ul>
                    </div>

</div>

</div> -->

<div class="membership container p-0" style="text-align: left;">
                <h2>Benefits of REIA Membership</h2>
                <div class="list-blocks">
                    <div>
                        <div class="inner-list-1">
                            <ul>
                                <li>Access to current and historical rare-earth pricing data.</li>
                                <li>Preferred access to the REIA Annual Conference and other events.</li>
                                <li>Access to project and partnership matchmaking projects.</li>
                                <li>Support for rare-earth market and scientific research.</li>
                                <li>Opportunities to influence and to contribute to REIA’s public-policy positions and outreach.</li>
                                <li>Stakeholder cooperation initiatives.</li>
                                <li>Process standardisation.</li>
                                <li>Access to REIA’s transparency and sustainability initiatives, including Produce Category Rules and Life-Cycle Assessment.</li>
                                <li>Access to weekly and quarterly newsletters and industry reports.</li>
                                <li>Discounted rates for REIA and third-party publications.</li>
                            </ul>
                        </div>
                        
                    </div>
                    
                </div>
            </div>
            <div class="membership" style="display: none">
                <h2><b>Focus For Upscaling Projects, E.G.:</b></h2>
                <div class="list-items" style="padding: 3% 0% 3% 0%;">
                    <div class="membership_div">
                        <ul>
                            <li style="padding-top: 20px;"> Market and scientific research </li>
                            <li style="padding-top: 20px;"> Life cycle assessment & inventory </li>
                            <li style="padding-top: 20px;"> Data base development </li>
                            <li style="padding-top: 20px;"> Stakeholder cooperation initiatives</li>
                            <li style="padding-top: 20px;"> Process standardization (e.g. ISO)</li>
                            <li style="padding-top: 20px;"> Measurement equipment - standards</li>
                        </ul>
                    </div>
                    <div class="membership_div">
                        <img class="research_image" src="./image 40.png" width="75%" height="auto" />
                    </div>
                    <div class="membership_div">
                        <ul>
                            <li style="padding-top: 20px;">Value chain risk analysis</li>
                            <li style="padding-top: 20px;">Technology road map analysis</li>
                            <li style="padding-top: 20px;">Strategic supply assessment</li>
                            <li style="padding-top: 20px;">EHS product certification</li>
                            <li style="padding-top: 20px;">Product tracing & labeling</li>
                            <li style="padding-top: 20px;">Product recycling</li>

</ul>
                    </div>
                </div>

</div>
            <div id="targetDiv">
                <h2><b>Membership Enquiry Form</b></h2>
                <h5 style="color:#20BEC7;"><b>Company Information</b></h5>
                <form id="myForm">
                    <div class="floating-form mb-5 col-lg-9 col-sm-12 px-0">

<div class="form-group">
                            <label>*Company Name</label>
                            <input class="floating-input form-control" type="text" placeholder="" name="company_name" id="company_name">
                            <span class="highlight"></span>
                        </div>

<div class="form-group">
                            <label>Address</label>
                            <input class="floating-input form-control" type="text" placeholder="" name="address1" id="address1">
                            <span class="highlight"></span>
                        </div>

<div class="form-group">
                            <label>Address Line 2</label>
                            <input class="floating-input form-control" type="text" placeholder="" name="address2" id="address2">
                            <span class="highlight"></span>
                        </div>

<div class="form-group">
                            <label>Address Line 3</label>
                            <input class="floating-input form-control" type="text" placeholder="" name="address3" id="address3">
                            <span class="highlight"></span>
                        </div>

<div style="display: flex;">
                            <div class="form-group col-6 pl-0">
                                <label>City</label>
                                <input class="floating-input form-control" type="text" placeholder="" name="city" id="city">
                                <span class="highlight"></span>
                            </div>
                            <div class="form-group col-6 px-0">
                                <label>State/Province/Region</label>
                                <input class="floating-input form-control" type="text" placeholder="" name="state" id="state">
                                <span class="highlight"></span>
                            </div>
                        </div>

<div style="display: flex;">
                            <div class="form-group col-6 pl-0">
                                <label>Zip/Postal Code</label>
                                <input class="floating-input form-control" type="text" placeholder="" name="zip" id="zip">
                                <span class="highlight"></span>
                            </div>
                            <div class="form-group col-6 px-0">
                                <label>* Country</label>
                                <input class="floating-input form-control" type="text" placeholder="" name="country" id="country">
                                <span class="highlight"></span>
                            </div>
                        </div>

<div style="display: flex;">
                            <div class="form-group col-6 pl-0">
                                <label>Phone</label>
                                <input class="floating-input form-control" type="text" placeholder="" name="mobile" id="mobile">
                                <span class="highlight"></span>
                            </div>
                            <div class="form-group col-6 px-0">
                                <label>Fax</label>
                                <input class="floating-input form-control" type="text" placeholder="" id="fax" name="fax">
                                <span class="highlight"></span>
                            </div>
                        </div>

<div style="display: flex;">
                            <div class="form-group col-6 pl-0">
                                <label>* Website</label>
                                <input class="floating-input form-control" type="text" placeholder="" id="website" name="website">
                                <span class="highlight"></span>
                            </div>
                            <div class="form-group col-6 px-0">
                                <label>EU vat Number</label>
                                <input class="floating-input form-control" type="text" placeholder="" id="vat" name="vat">
                                <span class="highlight"></span>
                            </div>
                        </div>

<h5 style="color:#20BEC7;  margin-bottom: 20px;"><b>Representative Information</b></h5>
                        <div style="display: flex;">
                            <div class="form-group col-6 pl-0">
                                <label>* First Name</label>
                                <input class="floating-input form-control" type="text" placeholder="" id="first_name" name="first_name">
                                <span class="highlight"></span>
                            </div>
                            <div class="form-group col-6 px-0">
                                <label>* Last Name</label>
                                <input class="floating-input form-control" type="text" placeholder="" id="last_name" name="last_name">
                                <span class="highlight"></span>
                            </div>
                        </div>

<div style="display: flex;">
                            <div class="form-group col-6 pl-0">
                                <label>* Job Title</label>
                                <input class="floating-input form-control" type="text" placeholder="" id="job_title" name="job_title">
                                <span class="highlight"></span>
                            </div>
                            <div class="form-group col-6 px-0">
                                <label>* Email</label>
                                <input class="floating-input form-control" type="email" placeholder="" id="email" name="email">
                                <span class="highlight"></span>

</div>
                        </div>

<div style="margin-top: 10px; margin-bottom: 20px;">
                            <div>
                                <input class="checkbox-input" type="checkbox" value="1" checked name="terms_accept" id="terms_accept">&nbsp; I
                                accept the <a href="https://global-reia.org/terms-of-use" target="_blank"> terms and conditions </a>
                            </div>
                            <div class="g-recaptcha" data-sitekey="6LcTWNolAAAAAGECrGTMXzHmWEBAjGE0bK_bIKVg"></div>
                            <span id="captcha_error" class="text-danger"></span>
                        </div>

<div>
                            <button class="buttons px-4 m-0">
                                <div class="d-flex align-items-center">
                                    <span> Submit </span>
                                    <img class="pl-2" src="./Vector.png" />
                                </div>
                            </button>
                        </div>

</div>
                </form>
                <div id="uploadStatus"> </div>
            </div>
            <div id="overlay">
                <lottie-player src="https://global-reia.org/data.json" background="transparent" speed="1" class="loaderLottie" loop="true" autoplay="true"></lottie-player>
            </div>
</body>

// Disable click events on the overlay
        overlay.onclick = function() {
            return false;
        };

// Disable click events on the entire document
        document.onclick = function() {
            return false;
        };
    }

function makePagenotTransparent() {
        var overlay = document.getElementById('overlay');
        overlay.style.display = 'none'; // Display the overlay

// Disable click events on the overlay
        overlay.onclick = function() {
            return true;
        };

// Disable click events on the entire document
        document.onclick = function() {
            return true;
        };
    }

function scrooldiv() {
        //window.location='#targetDiv';

var targetDiv = document.getElementById("targetDiv");
        targetDiv.scrollIntoView({
            behavior: "smooth"
        });

}

$("#myForm").submit(function(event) {
        event.preventDefault();
        // alert(); return;

let company_name = $("#company_name").val();
        let address1 = $("#address1").val();
        let address2 = $("#address2").val();
        let address3 = $("#address3").val();
        let city = $("#city").val();
        let state = $("#state").val();
        let zip = $("#zip").val();
        let country = $("#country").val();
        let mobile = $("#mobile").val();
        let fax = $("#fax").val();
        let website = $("#website").val();
        let vat = $("#vat").val();
        let first_name = $("#first_name").val();
        let last_name = $("#last_name").val();
        let job_title = $("#job_title").val();
        let email = $("#email").val();
        let terms_accept = $("#terms_accept").val();

let response = grecaptcha.getResponse();
        makePageTransparent();

const companynameRegex = /^[a-zA-Z]+( [a-zA-Z]+)*/;
        const isValidCompanyName = companynameRegex.test(company_name);

const countrynameRegex = /^[a-zA-Z]+( [a-zA-Z]+)*/;
        const isValidCountryName = countrynameRegex.test(country);

const firstnameRegex = /^[a-zA-Z]+( [a-zA-Z]+)*/;
        const isValidfirstName = firstnameRegex.test(first_name);

const lastnameRegex = /^[a-zA-Z]+( [a-zA-Z]+)*/;
        const isValidlastName = lastnameRegex.test(last_name);

const jobtitleRegex = /^[a-zA-Z]+( [a-zA-Z]+)*/;
        const isValidjobtitle = jobtitleRegex.test(job_title);

const mailnameregex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        const isValidemailName = mailnameregex.test(email);

if (company_name == '') {
            //alert('Please Enter company name');
            toastr.error('Please Enter company name');
            makePagenotTransparent();
            document.getElementById('company_name').focus();
            return false;
        }

if (!isValidCompanyName) {
            makePagenotTransparent();
            toastr.error("Please Provide a Valid organisation");
            document.getElementById('company_name').focus();
            return false;
        }

if (country == '') {
            //alert('Please Enter country name');
            makePagenotTransparent();
            toastr.error('Please Enter country name');
            document.getElementById('country').focus();
            return false;
        }

if (!isValidCountryName) {
            makePagenotTransparent();
            toastr.error("Please Provide a Valid Country Name");
            document.getElementById('country').focus();
            return false;
        }

if (website == '') {
            //alert('Please Enter website name');
            makePagenotTransparent();
            toastr.error('Please Enter website name');
            document.getElementById('website').focus();
            return false;
        }

if (first_name == '') {
            //alert('Please Enter first name');
            makePagenotTransparent();
            toastr.error('Please Enter first name');
            document.getElementById('first_name').focus();
            return false;
        }

if (!isValidfirstName) {
            makePagenotTransparent();
            toastr.error("Please Provide a Valid First name");
            document.getElementById('first_name').focus();
            return false;
        }

if (last_name == '') {
            //alert('Please Enter last name');
            makePagenotTransparent();
            toastr.error('Please Enter last name');
            document.getElementById('last_name').focus();
            return false;
        }

if (!isValidlastName) {
            makePagenotTransparent();
            toastr.error("Please Provide a Valid last name");
            document.getElementById('last_name').focus();
            return false;
        }

if (job_title == '') {
            //alert('Please Enter job name');
            makePagenotTransparent();
            toastr.error('Please Enter job name');
            document.getElementById('job_title').focus();
            return false;
        }

if (!isValidjobtitle) {
            makePagenotTransparent();
            toastr.error("Please Provide a Valid job name");
            document.getElementById('job_name').focus();
            return false;
        }

if (email == '') {
            //alert('Please Enter email');
            makePagenotTransparent();
            toastr.error('Please Enter email');
            document.getElementById('email').focus();
            return false;
        }

if (!isValidemailName) {
            makePagenotTransparent();
            toastr.error("Please Provide a Valid email");
            document.getElementById('email').focus();
            return false;
        }

if (response.length === 0) {
            makePagenotTransparent();
            toastr.error('Please verify that you are not a robot.');
            return false;
        }

toastr.options = {
            'closeButton': true,
            'debug': false,
            'newestOnTop': false,
            'progressBar': false,
            'positionClass': 'toast-top-right',
            'preventDuplicates': false,
            'showDuration': '1000',
            'hideDuration': '1000',
            'timeOut': '5000',
            'extendedTimeOut': '1000',
            'showEasing': 'swing',
            'hideEasing': 'linear',
            'showMethod': 'fadeIn',
        }

// Toast Image and Progress Bar
        $('#image').click(function(event) {
            toastr.options.progressBar = true,
                toastr.info('<img src="https://image.flaticon.com/icons/svg/34/34579.svg" style="width:150px;">', 'Toast Image')
        });

// Toast Position
        $('#position').click(function(event) {
            var pos = $('input[name=position]:checked', '#positionForm').val();
            toastr.options.positionClass = "toast-" + pos;
            toastr.options.preventDuplicates = false;
            toastr.info('This sample position', 'Toast Position')
        });

$.ajax({
            type: "POST",
            url: "registration.php",
            data: {
                company_name: company_name,
                address1: address1,
                address2: address2,
                address3: address3,
                city: city,
                state: state,
                zip: zip,
                country: country,
                mobile: mobile,
                fax: fax,
                website: website,
                vat: vat,
                first_name: first_name,
                last_name: last_name,
                job_title: job_title,
                email: email,
                terms_accept: terms_accept
            },

success: function(response) {
                //alert(response);
                if (response == 1) {
                   makePagenotTransparent();
                    toastr.success('Registration is completed! We will be sending you an email shortly with more details.');
                    //$('#uploadStatus').html('<p style="color:#EA4335;">Success</p>');
                    $(this).trigger("reset");
                   setTimeout(function() {
       					 window.location.reload();
    			}, 5000);

} else if (response == 0) {
                    //$('#uploadStatus').html('<p style="color:#EA4335;">Faild</p>');
                    makePagenotTransparent();
                    toastr.error('Something went wrong');
                    //window.location.reload();

} else if (response == 2) {
                    makePagenotTransparent();
                    toastr.error('Sorry! This email already registred');
                    //window.location.reload();
                } else if (response == 3) {
                    makePagenotTransparent();
                    toastr.error('Registration done! Failed to sent email');
                    //window.location.reload();
                }
            
            }
        });

});
</script>

</html>

<?php
get_footer(); //Include header
?>