diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 0000000..7c9c29c --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,319 @@ +jQuery(function ($) { + "use strict"; + + /* ========================================================================= */ + /* Page Preloader + /* ========================================================================= */ + + // Preloader js + $(window).on('load', function () { + $('#preloader').fadeOut(700); + }); + + /* ========================================================================= */ + /* Post image slider + /* ========================================================================= */ + + $("#post-thumb, #gallery-post").slick({ + infinite: true, + arrows: false, + autoplay: true, + autoplaySpeed: 4000 + + }); + + $("#features").slick({ + infinite: true, + arrows: false, + autoplay: true, + autoplaySpeed: 4000 + }); + + /* ========================================================================= */ + /* Magnific popup + /* ========================================================================= */ + $('.image-popup').magnificPopup({ + type: 'image', + removalDelay: 160, //delay removal by X to allow out-animation + callbacks: { + beforeOpen: function () { + // just a hack that adds mfp-anim class to markup + this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim'); + this.st.mainClass = this.st.el.attr('data-effect'); + } + }, + closeOnContentClick: true, + midClick: true, + fixedContentPos: false, + fixedBgPos: true + }); + /* ========================================================================= */ + /* Portfolio Filtering Hook + /* ========================================================================= */ + + var containerEl = document.querySelector('.filtr-container'); + if (containerEl) { + var filterizd = $('.filtr-container').filterizr({}); + } + /* ========================================================================= */ + /* Testimonial Carousel + /* ========================================================================= */ + + //Init the carousel + $("#testimonials").slick({ + adaptiveHeight: true, + // appendArrows: $('.client-meta', this), + autoplay: true, + // autoplaySpeed: 2500, + centerMode: true, + centerPadding: '0px', + dots: true, + // dotsClass: 'slick-dots-custom', + mobileFirst: true, + respondTo: 'min', + }); + + /* ========================================================================= */ + /* Contact Form Validating + /* ========================================================================= */ + + + $('#contact-submit').click(function (e) { + + //stop the form from being submitted + e.preventDefault(); + + /* declare the variables, var error is the variable that we use on the end + to determine if there was an error or not */ + var error = false; + var name = $('#name').val(); + var email = $('#email').val(); + var subject = $('#subject').val(); + var message = $('#message').val(); + + /* in the next section we do the checking by using VARIABLE.length + where VARIABLE is the variable we are checking (like name, email), + length is a JavaScript function to get the number of characters. + And as you can see if the num of characters is 0 we set the error + variable to true and show the name_error div with the fadeIn effect. + if it's not 0 then we fadeOut the div( that's if the div is shown and + the error is fixed it fadesOut. + + The only difference from these checks is the email checking, we have + email.indexOf('@') which checks if there is @ in the email input field. + This JavaScript function will return -1 if no occurrence have been found.*/ + if (name.length == 0) { + var error = true; + $('#name').css("border-color", "#D8000C"); + } else { + $('#name').css("border-color", "#666"); + } + if (email.length == 0 || email.indexOf('@') == '-1') { + var error = true; + $('#email').css("border-color", "#D8000C"); + } else { + $('#email').css("border-color", "#666"); + } + if (subject.length == 0) { + var error = true; + $('#subject').css("border-color", "#D8000C"); + } else { + $('#subject').css("border-color", "#666"); + } + if (message.length == 0) { + var error = true; + $('#message').css("border-color", "#D8000C"); + } else { + $('#message').css("border-color", "#666"); + } + + //now when the validation is done we check if the error variable is false (no errors) + if (error == false) { + //disable the submit button to avoid spamming + //and change the button text to Sending... + $('#contact-submit').attr({ + 'disabled': 'false', + 'value': 'Sending...' + }); + + /* using the jquery's post(ajax) function and a lifesaver + function serialize() which gets all the data from the form + we submit it to send_email.php */ + $.post("sendmail.php", $("#contact-form").serialize(), function (result) { + //and after the ajax request ends we check the text returned + if (result == 'sent') { + //if the mail is sent remove the submit paragraph + $('#cf-submit').remove(); + //and show the mail success div with fadeIn + $('#mail-success').fadeIn(500); + } else { + //show the mail failed div + $('#mail-fail').fadeIn(500); + //re enable the submit button by removing attribute disabled and change the text back to Send The Message + $('#contact-submit').removeAttr('disabled').attr('value', 'Send The Message'); + } + }); + } + }); + +}); +// End Jquery Function + + +/* ========================================================================= */ +/* Animated section +/* ========================================================================= */ + +var wow = new WOW({ + offset: 100, // distance to the element when triggering the animation (default is 0) + mobile: false // trigger animations on mobile devices (default is true) +}); + +//https://github.com/matthieua/WOW/issues/196#issuecomment-348734401 +var scrolled = false; +$(window).on('scroll', function () { + if (!scrolled) { + scrolled = true; + wow.init(); + } +}) + +/* ========================================================================= */ +/* Google Map Customization +/* ========================================================================= */ + +function initialize() { + + var latitude = $('#map-canvas').attr('data-latitude'); + var longitude = $('#map-canvas').attr('data-longitude'); + var myLatLng = new google.maps.LatLng(latitude, longitude); + + var roadAtlasStyles = [{ + "featureType": "landscape", + "elementType": "geometry.fill", + "stylers": [{ + "color": "#2F3238" + }] + }, { + "elementType": "labels.text.fill", + "stylers": [{ + "color": "#FFFFFF" + }] + }, { + "elementType": "labels.text.stroke", + "stylers": [{ + "visibility": "off" + }] + }, { + "featureType": "road", + "elementType": "geometry.fill", + "stylers": [{ + "color": "#50525f" + }] + }, { + "featureType": "road", + "elementType": "geometry.stroke", + "stylers": [{ + "visibility": "on" + }, { + "color": "#808080" + }] + }, { + "featureType": "poi", + "elementType": "labels", + "stylers": [{ + "visibility": "off" + }] + }, { + "featureType": "transit", + "elementType": "labels.icon", + "stylers": [{ + "visibility": "off" + }] + }, { + "featureType": "poi", + "elementType": "geometry", + "stylers": [{ + "color": "#808080" + }] + }, { + "featureType": "water", + "elementType": "geometry.fill", + "stylers": [{ + "color": "#3071a7" + }, { + "saturation": -65 + }] + }, { + "featureType": "road", + "elementType": "labels.icon", + "stylers": [{ + "visibility": "off" + }] + }, { + "featureType": "landscape", + "elementType": "geometry.stroke", + "stylers": [{ + "color": "#bbbbbb" + }] + }]; + + var mapOptions = { + zoom: 14, + center: myLatLng, + disableDefaultUI: true, + scrollwheel: false, + navigationControl: false, + mapTypeControl: false, + scaleControl: false, + draggable: false, + mapTypeControlOptions: { + mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'roadatlas'] + } + }; + + var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); + + + var marker = new google.maps.Marker({ + position: myLatLng, + map: map, + title: '', + }); + + + google.maps.event.addListener(marker, 'click', function () { + infowindow.open(map, marker); + }); + + var styledMapOptions = { + name: 'US Road Atlas' + }; + + var usRoadMapType = new google.maps.StyledMapType( + roadAtlasStyles, styledMapOptions); + + map.mapTypes.set('roadatlas', usRoadMapType); + map.setMapTypeId('roadatlas'); +} + +google.maps.event.addDomListener(window, "load", initialize); + +/* ========================================================================= */ +/* Staticman comments reply +/* ========================================================================= */ +function changeValue(elementName, newValue) { + document.getElementsByName(elementName)[0].value = newValue; +}; + +/* ========================================================================= */ +/* Honeypot +/* ========================================================================= */ +$(document).ready(function () { + $('form').submit(function () { + if ($('input[type="text"]#e-mail').val().length > 0) { + $('form').attr('action', '/'); + return false; + } + }); +}); diff --git a/assets/sass/custom.scss b/assets/sass/custom.scss index 1d3128e..f942e35 100644 --- a/assets/sass/custom.scss +++ b/assets/sass/custom.scss @@ -54,6 +54,29 @@ p, h3, h4 { } } +// .slick-dots { + // li { + // button { + // border-radius: 100%; + // padding: 5px; + // background-color: white; + // text-indent: 100vw; + + // $button-size: 2px; + // height: $button-size; + // width: $button-size; + // // &:focus { + // // background-color: red; + // // } + + // } + + // .slick-active button { + // background-color: red; + // } + // } +// } + .social-icon { img { height: 75%; @@ -84,3 +107,7 @@ p, h3, h4 { // background-size: auto; // background-size: contain; } + +#testimonials { + max-width: 75vw; +} diff --git a/config.toml b/config.toml index f0a8183..7fd68a0 100644 --- a/config.toml +++ b/config.toml @@ -52,7 +52,7 @@ custom_css = ["css/custom.css"] bgImage = "images/slider/hero-area.jpg" # bgImage = "images/slider/eagle.png" heading = "Ataraxy" - content= "NA, MP-focused clan that is currently looking for friendly and active clan members to play together with." + content= "Top 250, MP-focused clan that is currently looking for friendly and active clan members to play together with." btn = true btnText="Requirements" btnURL="#requirements" diff --git a/data/about.yml b/data/about.yml index 00169d6..ce777d0 100644 --- a/data/about.yml +++ b/data/about.yml @@ -15,4 +15,4 @@ benefits : - "vibrant and respectful Discord community" - "leadership opportunities" - "MEE6 leaderboard" -- "mini-games (trivia/Pokecord)" +- "mini-games (Pokecord/gambling/trivia)" diff --git a/data/team.yml b/data/team.yml index ee17607..76e4309 100644 --- a/data/team.yml +++ b/data/team.yml @@ -15,7 +15,7 @@ teamMember : - imageName : pistolfist name : PistolFist designation : Vice Master - description : In charge of recruiting and assists with player management. Created this site and co-designed clan logo. Founder of clan. + description : In charge of recruiting. Assists with player management. Created this site and co-designed clan logo. Founder of clan. # socialIcon : # - icon : tf-ion-social-facebook # url : "#" diff --git a/layouts/partials/testimonial.html b/layouts/partials/testimonial.html index 3d186ca..f1d5b39 100644 --- a/layouts/partials/testimonial.html +++ b/layouts/partials/testimonial.html @@ -15,7 +15,7 @@
{{"" | safeHTML}} -
+
{{ range .Site.Data.testimonial.testimonialItem }} {{"" | safeHTML}}