https://globaldiscoveryhub.com/components/pages/contact_page/contact_page.min.js

1riot.tag2("contact_page",'<div class="message_toast" show="{show_toast}"> <p>Your Contact request has been successfully sent.</p> </div> <div show="{notloaded}" class="page_image" data-is="animore" mount="{{                     duration: 1500,                     translateY: [-1500, 0],                     delay: 500,                     easing: \'easeOutExpo\'                  }}"></div> <div class="breadcrumbs" data-is="animore" update="{{                     duration: 1500,                     easing: \'easeOutExpo\',                     delay: 250                  }}"> <div> <a href="#home" style="align-self:center;width:25px;height:25px;"> <img src="/resources/images/home_icon.svg" width="25px"> </a> <p>&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;&nbsp;<a href="#contact">Contact Us</a> </p> </div> </div> <div class="vertical layout end-justified center" id="section_1" data-is="animore" update="{{                     duration: 1500,                     easing: \'easeOutExpo\',                     delay: 250                  }}"> <div style="width: 75%;"> <h1>Contact Us</h1> <p> Do you need more information? You may use the form below to find out more about system operation, technical specifications, new features, how to enroll in the <span style="font-weight: bolder; color: var(--secondary_text_color);">Early Adopter Program</span> at competitive pricing, or make a general inquiry. </p> </div> <div class="vertical layout center form"> <p show="{err_name}" id="err_name"> Please enter your name.</p> <input type="text" id="name" ref="name" class="{err_name ? \'err_form_input\' : \'\'}" onchange="{hideErrors}" placeholder="Your Name (Required)"> <p show="{err_email}" id="err_email"> Please enter your email-id.</p> <p show="{err_email_valid}"> Please enter a valid email-id.</p> <input id="email" ref="email" class="{(err_email||err_email_valid) ? \'err_form_input\' : \'\'}" onchange="{hideErrors}" placeholder="Your Email (Required)" type="email"> <input type="text" id="subject" ref="subject" placeholder="Subject"> <p show="{err_message}" id="err_message"> Please enter a message.</p> <textarea name="message" id="message" rows="10" cols="30" ref="message" class="{err_message ? \'err_form_input\' : \'\'}" onchange="{hideErrors}" placeholder="Type Your Message..."></textarea> <button show="{!is_loading}" onclick="{sendContactEnquiry}">Submit</button> <div show="{is_loading}" class="btn_loader"> <div> <div class="circle"></div> <div class="circle" id="circle2"></div> </div> </div> </div> </div> <h3> Explore the Global Discovery Hub at the University of South Florida <a target="_blank" href="https://globaldiscpro.forest.usf.edu/">here</a>. </h3>','contact_page{ color: var(--primary_text_color); display: flex; flex-direction: column; justify-content: center; align-items: center; } contact_page .page_image,[data-is="contact_page"] .page_image{ width: 100%; height: 300px; background: url(/resources/images/phones-min.jpeg); background-size: cover; background-position: 0% 65%; } contact_page .breadcrumbs,[data-is="contact_page"] .breadcrumbs{ box-sizing: border-box; padding-left: 25px; width: 100%; height: 50px; background: var(--primary_dark_background_color); color: var(--secondary_text_color); font-family: \'Open Sans Condensed\'; text-transform: uppercase; letter-spacing: 1px; } contact_page .breadcrumbs div,[data-is="contact_page"] .breadcrumbs div{ display: flex; } contact_page .breadcrumbs p,[data-is="contact_page"] .breadcrumbs p{ margin-top: 17px; font-size: 14px; } contact_page .breadcrumbs a,[data-is="contact_page"] .breadcrumbs a{ color: var(--secondary_text_color) !important; text-decoration: none !important; } contact_page .breadcrumbs img:hover,[data-is="contact_page"] .breadcrumbs img:hover{ cursor: pointer; } contact_page #section_1,[data-is="contact_page"] #section_1{ padding: 3rem; } contact_page #section_1 h1,[data-is="contact_page"] #section_1 h1{ font-weight: 300; letter-spacing: 5px; } contact_page .form,[data-is="contact_page"] .form{ padding: 2rem; width: 75%; } contact_page .form input,[data-is="contact_page"] .form input,contact_page .form textarea,[data-is="contact_page"] .form textarea{ font-weight: 300; letter-spacing: 1px; font-size: 1rem; padding: 1rem; width: 75%; height: 25px; border: 3px solid var(--secondary_text_color); background: var(--primary_dark_background_color); color: var(--primary_text_color); margin-bottom: 1.25rem; } contact_page .form textarea,[data-is="contact_page"] .form textarea{ height: 150px; } contact_page ::-webkit-input-placeholder,[data-is="contact_page"] ::-webkit-input-placeholder{ color: var(--secondary_text_color); } contact_page ::-moz-placeholder,[data-is="contact_page"] ::-moz-placeholder{ color: var(--secondary_text_color); } contact_page :-ms-input-placeholder,[data-is="contact_page"] :-ms-input-placeholder{ color: var(--secondary_text_color); } contact_page :-moz-placeholder,[data-is="contact_page"] :-moz-placeholder{ color: var(--secondary_text_color); } contact_page .form button,[data-is="contact_page"] .form button{ cursor: pointer; font-weight: 300; width: 50%; height: 50px; background: var(--secondary_text_color); border: 0; text-align: center; color: var(--tertiary_text_color); font-size: 1rem; transition: 0.15s cubic-bezier(0.7, 0, 0.3, 1); box-sizing: border-box; letter-spacing: 1px; } contact_page .form button:hover,[data-is="contact_page"] .form button:hover{ color: var(--secondary_text_color); border: 2px solid var(--secondary_text_color); background: white; } contact_page .form p,[data-is="contact_page"] .form p{ color: #ef7979; margin-left: 0px !important; } contact_page .err_form_input,[data-is="contact_page"] .err_form_input{ border-color: #ef7979 !important; } contact_page .btn_loader,[data-is="contact_page"] .btn_loader{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50px; } contact_page .circle,[data-is="contact_page"] .circle{ position: relative; width: 10px; height: 10px; border-radius: 50%; background: orange; animation-name: anim; animation-duration: 2s; animation-iteration-count: infinite; }

1 contact_page #circle2,[data-is="contact_page"] #circle2{ margin-top: -10px; animation-name: anim; animation-delay: 0.5s; animation-duration: 2s; animation-iteration-count: infinite; } contact_page .message_toast,[data-is="contact_page"] .message_toast{ position: fixed; top: -50px; width: 75%; text-align: center; background: forestgreen; color: white; border-radius: 5px; padding: 5px; text-transform: uppercase; font-family: \'Open Sans Condensed\'; letter-spacing: 1px; box-shadow: 1px 4px 25px rgba(0,0,0,0.5); animation : toast 5s ease-in-out; } contact_page textarea,[data-is="contact_page"] textarea{ font-family: \'Open Sans\', sans-serif; } @keyframes anim{ 0% { opacity: 1; transform: scale(0); } 100% { opacity: 0; transform: scale(6); } } @keyframes toast{ 0%{ top: -50px; } 10%{ top: 100px; } 90%{ top: 100px; } 100%{ top: -50px; } } @media (min-width: 1280px){ contact_page .page_image,[data-is="contact_page"] .page_image{ height: 400px; } } @media (max-width: 425px){ contact_page .page_image,[data-is="contact_page"] .page_image{ background-position: 35% 0%; } } @media (max-width:400px) { contact_page .form,[data-is="contact_page"] .form{ padding: 1rem 0 1rem 0; } contact_page .form textarea,[data-is="contact_page"] .form textarea{ height: 100px; } } @media(max-width: 320px){ contact_page .page_image,[data-is="contact_page"] .page_image{ background-position: 20% 0%; } }',"",function(opts){"use strict";var self=this;var ttw=self.opts.ttw;self.callback=function(){self.update({notloaded:true})};debugger;self.on("mount",function(){"use strict";self.notloaded=false;var ttw=self.opts.ttw;var img=document.createElement("img");img.onload=self.callback;img.src="/resources/images/phones-min.jpeg";self.err_name=false;self.err_email=false;self.err_email_valid=false;self.err_message=false;self.is_loading=false;self.show_toast=false;self.update()});self.init=function(){document.getElementById("name").value="";document.getElementById("email").value="";document.getElementById("subject").value="";document.getElementById("message").value="";self.is_loading=false};self.sendContactEnquiry=function(e){self.hideErrors();var form_is_valid=self.validateContactEnquiry();if(form_is_valid){self.is_loading=true;try{var name=document.getElementById("name").value.trim();var email=document.getElementById("email").value.trim();var subject=document.getElementById("subject").value.trim();var message=document.getElementById("message").value.trim();ttw.fire_ref.child("contactus").push().set({name:name,email:email,subject:subject,message:message,sent:false}).then(function(){setTimeout(function(){document.getElementById("name").value="";document.getElementById("email").value="";document.getElementById("subject").value="";document.getElementById("message").value="";self.is_loading=false;self.show_toast=true;setTimeout(function(){self.show_toast=false;self.update()},5e3);self.update()},1e3)}).catch(function(error){console.log(error)})}catch(e){console.log(e)}}};self.focusError=function(element){setTimeout(function(){element.focus();setTimeout(function(){self.hideErrors()},2e3)},500)};self.validateContactEnquiry=function(){var name=document.getElementById("name").value.trim();var email=document.getElementById("email").value.trim();var message=document.getElementById("message").value.trim();if(name==""){self.err_name=true;document.getElementById("name").scrollIntoView({behavior:"smooth"});self.focusError(document.getElementById("name"));return false}else if(email==""){self.err_email=true;document.getElementById("email").scrollIntoView({behavior:"smooth"});self.focusError(document.getElementById("email"));return false}else if(!self.validateEmail(email)){self.err_email_valid=true;document.getElementById("email").scrollIntoView({behavior:"smooth"});self.focusError(document.getElementById("email"));return false}else if(message==""){self.err_message=true;document.getElementById("message").scrollIntoView({behavior:"smooth"});self.focusError(document.getElementById("message"));return false}return true};self.hideErrors=function(){self.err_name=false;self.err_email=false;self.err_email_valid=false;self.err_message=false;

1self.update()};self.validateEmail=function(user_email){if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(user_email)){return true}return false}});