Repair Geek - Laptop And Computer Fixing Service Center HTML5 Template


If you like this template please spare a minute to rate it. If you want any support, Please feel free to contact me via my profile page http://themeforest.net/user/xenioushk

Template Overview


Repair Geek is a modern looking HTML5 template designed & developed for Laptop And Computer Fixing Service Center in mind. It works smoothly on your Computer, or on your tablet and mobile devices. It’s comes with eye catching features, such as animates boxes, contact form section, testimonial box, counter block and much more.

Features

20+ HTML5 Templates

  1. Home Page 1 (index.html)
  2. Home Page 2 (home-2.html)
  3. About Us (about-us.html)
  4. Our Volunteer (team.html)
  5. Volunteer Details (single-team.html)
  6. Blog (blog.html)
  7. Blog single(single.html)
  8. Events (events.html)
  9. Single Events (event-single.html)
  10. Causes (causes.html)
  11. Single Cause(cause-single.html)
  12. FAQ (faq.html)
  13. Donation (donation.html)
  14. Coming Soon (coming-soon.html)
  15. 404 (404.html)
  16. Contact(contact.html)
  17. Gallery 01(gallery-1.html)
  18. Gallery 01(gallery-2.html)
  19. Element Highlights (element-highlights.html)
  20. Element Counter (element-counters.html)
  21. Element CTA (element-cta.html)
  22. Element Sponsors (element-sponsors.html)
  23. Element Testimonials (element-testimonial.html)
  24. Element Team (element-team.html)
  25. Element Newsletter (element-newsletter.html)
This template built with LESS. Inside the directory css/less you will find all less files where variables.less declares all colors and variables and layout.less mainly contain all necessary declaration for css. style.less should be compiled to css/style.css. Other two less files mixins.less and reset.less are for common CSS behaviour.

demo

Less Complier Tool:
We have used "crunch2" less compiler to generate CSS from less file. It's FREE and very easy to use. You can download it from following link- https://getcrunch.co/
How To Compile Less File Using Crunch:

Please follow the steps to compile template LESS file.

Step 01:

From Crunch 2 menu open project/template files and select "styles.less" file.

Step 02:

Next, from Crunch 2 menu click "Crunch!".

Step 03:

Compiler will compile "styles.less" to "styles.css" file and display success message bottom of Crunch 2 editor.

Step 04:

Open and edit "css/less/variables.less" file to change font family, primary color and other options.

All the directories and files are well organized as it shown on the image bellow. Same file tree has been applicable for all HTML files

demo

This template is a mobile friendly (responsive) layout which is designed based on Twitter Bootstrap v3.*. See our HTML file structure which is in index.html. Your contents go inside container.

demo

We are using 7 CSS files in this template and we separated styles for improving convenience to edit this template. If you're going to use this template in production we recommend you to merge all stylesheets into one file (for decreasing HTTP queries).

demo

There are 11 jQuery files including necessary plugins, all of them be found in jsfolder of home directory. custom-scripts.js This file must go all the way down to other files and plugins for app landing page. This file contains custom codes

demo

Hedaer Logo Screenshot

demo

We have used google font Open Sans. Font used in the top of the file less/variables.less

demo

We used WOW plugin to trigger animations on scroll. Here are some animation classes we used in this Template. To learn more about WOW please read their Documentation
    1. fadeIn
    2. fadeInLeft
    3. fadeInRight
    4. fadeInUp
    5. fadeInDown
    6. fadeInLeftBig
    7. fadeInRightBig
    8. fadeInUpBig
    9. fadeInDownBig
                

demo

We used several background images in our template. You'll find the code in the file css/less/layout.less. Thess code will be available after the compilation of the layout.less and written in the css/layout.css in the. Examples are given in the screenshot

In the layout.less

demo

In the index.html

demo

For any kind of business, Google Map is considered as an essential tool. To keep this requirement in mind, this template facilitates the option to display Google Map anywhere of the page. Check out step by step instructions to setup a Google Map -

Step 01: Open contact.html file and you'll get two JavaScript files has been included at the bottom of the page. Note that, you need to Set Google Map API Key in first JavaScript file. Otherwise, Google Map may not work properly.

<script src="https://maps.google.com/maps/api/js?sensor=true&key=AIzaSyB8asWf-NyxR0dTHf_OMY9iT_lRncQG8x3"></script>
<script src="js/jquery.gmap.min.js"></script>

Step 02: We have defined a div with an ID called 'map canvas' and we are going to show the map in there. You will get following example code in contact.html tempate.

<div class="section-google-map-block wow fadeInUp">
    <div id="map_canvas"></div>
</div>         

Step 03: Next, navigate to the 'js/custom-scripts.js' folder in template directory. In that file, you can set Map Custom Height, location latitude and longitude. Generate your location "Latitude" and "Loongitude" from https://latlong.net/ & find more examples of Google Map in https://hpneo.github.io/gmaps/examples.html

// GOOGLE MAP FOR CONTACT US PAGE.

if ($('#map_canvas').length) {

    var map;

    $('#map_canvas').css({
        'height': '400px'
    });

    map = new GMaps({
        div: '#map_canvas',
        lat: -12.043333,
        lng: -77.028333
    });

    map.addMarker({
        lat: -12.043333,
        lng: -77.028333,
        title: 'Lima',
        click: function (e) {
            alert('You clicked in this marker');
        }
    });

}

Setup Google Map API Key:

Step 01. Go to following link and get your own API key.
https://developers.google.com/maps/documentation/javascript/get-api-key

Step 02. Click GET A KEY button and Popup window will appear.

Step 03. Now, follow the popup window instructions and you’ll get an API key like following example. Copy that API Key and add it in your JS code.

https://maps.google.com/maps/api/js?key=your-api-key

Output: If everything has been done perfectly, you will see a Google map displaying properly in your page like the following example.

Without any question, Contact Form is the most popular and well known communication medium between site owner and the customer. To be more specific, in terms of building a strong and solid customers base contact form can play a massive role. We believe that, it will helps you to achieve your business goal. To consider this fact, we have included a Fully functional, Responsive and Eye catching Contact Form with template package, which validates the customer submitted information, processes it and send message instantly without reloading the page. Lets learn more about Contact Form HTML, JavaScript and PHP Code.

Contact Form HTML Code:

You can set custom text in 'placeholder' and 'data-msg' tags.

<div class="contact-form-block">

        <h2 class="contact-title">Say Hello To Us</h2>

        <form role="form" action="#" method="post" id="contact-form">

            <div class="form-group">
                <input type="text" class="form-control" id="user_name" name="user_name" placeholder="Name" data-msg="Please Write Your Name" />
            </div>

            <div class="form-group">
                <input type="email" class="form-control" id="user_email" name="user_email" placeholder="Email" data-msg="Please Write Your Valid Email" />
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="email_subject" name="email_subject" placeholder="Subject" data-msg="Please Write Your Message Subject" />
            </div>

            <div class="form-group">
                <textarea class="form-control" rows="5" name="email_message" id="email_message" placeholder="Message" data-msg="Please Write Your Message" ></textarea>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-theme">Send Now</button>
            </div>

        </form>

    </div> 

Contact Form JavaScript Code:

if($('#contact-form').length) {

       var $contact_form = $("#contact-form");
       var $contact_submit_btn = $contact_form.find("button.btn-custom");
       var $user_name = $contact_form.find("#user_name");
       var $user_email = $contact_form.find("#user_email");
       var $email_subject = $contact_form.find("#email_subject");
       var $email_message = $contact_form.find("#email_message");

       var emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

       var $all_fields = $([]).add($user_name).add($user_email).add($email_subject).add($email_message);

       $all_fields.val("");

       var $error_border =  "border-bottom: 1px solid red;";
       var contact_form_bValid, user_name_bValid,user_email_bValid,user_email_subject_bValid, user_email_message_bValid;

       $contact_form.find("button[type=submit]").on("click", function() {

               contact_form_bValid = true;

               if( $user_name.val() === "" ) {

                   user_name_bValid = false;
                   $user_name.next("span").remove();
                   $user_name.attr("style", $error_border).after("" + $user_name.attr("data-msg") + "");

               } else {
                   user_name_bValid = true;
                   $user_name.removeAttr("style").next("span").remove();

               }

                contact_form_bValid = contact_form_bValid && user_name_bValid;


               if( $user_email.val() === ""  || email_checkRegexp( $user_email , emailRegex) === false  ) {

                   user_email_bValid = false;
                   $user_email.next("span").remove();
                   $user_email.attr("style", $error_border).after("" + $user_email.attr("data-msg") + "");

               } else {
                    user_email_bValid = true;
                   $user_email.removeAttr("style").next("span").remove();

               }

               contact_form_bValid = contact_form_bValid && user_email_bValid;


               if( $email_subject.val() === "" ) {

                   user_email_subject_bValid = false;
                   $email_subject.next("span").remove();
                   $email_subject.attr("style", $error_border).after("" + $email_subject.attr("data-msg") + "");

               } else {
                   user_email_subject_bValid = true;
                   $email_subject.removeAttr("style").next("span").remove();
               }

               contact_form_bValid = contact_form_bValid && user_email_subject_bValid;

               if( $email_message.val() === "" ) {

                   user_email_message_bValid = false;
                   $email_message.next("span").remove();
                   $email_message.attr("style", $error_border).after("" + $email_message.attr("data-msg") + "");

               } else {
                   user_email_message_bValid = true;
                   $email_message.removeAttr("style").next("span").remove();

               }

               contact_form_bValid = contact_form_bValid && user_email_message_bValid;

               if ( contact_form_bValid === true ) {

                   $all_fields.attr("disabled", "disabled");
                   $contact_submit_btn.after("Please wait ....").attr("disabled","disabled");

                   $.ajax({
                   url: "contact_email.php",
                   type: 'POST',
                   dataType: 'JSON',
                   data: {
                       safety_key: 'dynatf',
                       user_name: $user_name.val(),
                       user_email: $user_email.val(),
                       email_subject: $email_subject.val(),
                       email_message: $email_message.val()
                   },
                   success: function (data) {

                       if ( data.status === 1) {

                           $contact_submit_btn.next("span").remove();
                           $contact_submit_btn.after("" + data.msg + "");

                           setTimeout(function(){

                               $all_fields.removeAttr("disabled").val("");

                               $contact_submit_btn.next("span").slideUp('slow',function(){
                                   $(this).remove();
                                   $contact_submit_btn.removeAttr("disabled");
                               });

                           },3000);

                       } else {

                           $all_fields.removeAttr("disabled");

                       }

                   },
                   error: function (xhr, textStatus, e) {
                       alert("Email can not be sent. Please try again.");
                       return;
                   }

               });

               }

           return false;

       })

   }

Contact Form PHP Code:

You will get following codes in 'contact_email.php' file. There, you just need to set Administrator user email address, who would like to receive the customer messages.

<?php

if (!isset($_REQUEST['safety_key'])) {
    die();
}

$to = "youremail@gmail.com"; // write you email address in here.

// Fetching Values from URL.

$user_name = $_POST['user_name'];

$user_email = $_POST['user_email'];

$email_subject = $_POST['email_subject'];

$email_message = $_POST['email_message'];



$template = '<div>Hello ' . $user_name . ',<br/>'
        . '<br/>Thank you...! For Contacting Us.<br/><br/>'
        . 'Name:' . $user_name . '<br/>'
        . 'Email:' . $user_email . '<br/>'
        . 'Message:' . $email_message . '<br/><br/>'
        . 'This is a Contact Confirmation mail.'
        . '<br/>'
        . 'We Will contact You as soon as possible .</div>';

$message = "<div>" . $template . "</div>";

$headers = 'MIME-Version: 1.0' . "\r\n";

$headers.='Content-type: text/html; charset=utf-8; charset=iso-8859-1' . "\r\n";

$headers.='From:' . $user_email . "\r\n"; // Sender's Email

mail($to, $email_subject, $message, $headers, '');



$data = array(
    'status' => 1,
    'msg' => "Your Query has been received, We will contact you soon."
);

echo json_encode($data);

2018, July, 26 - v 1.0.4
- Updated Stylesheet Code(styles.js).
- Updated JavaScript Code(custom-scripts.js).
- Update documentation.

2018, June, 16 - v 1.0.3
- Updated Stylesheet Code(styles.js).
- Updated JavaScript Code(custom-scripts.js).
- Update documentation.

2018, January, 10 - v 1.0.2
- Updated Stylesheet Code(styles.js).
- Updated JavaScript Code(custom-scripts.js).
- Update documentation.

2018, April, 04 - v 1.0.1
- Added Two More Home Pages With New Color Scheme.
- Added Functional Contact Form.
- Update Documentation.

2017, September, 09 - v 1.0.0
- Initial release

- jQuery
- Bootstrap
- Google Fonts
- Owl Carousel
- Font Awesome
- Google Maps API
- Freepik.com
- Pexels.com

  1. doc_img Sharai Khana - Computer Service Center WordPress Theme
  2. doc_img Knowledgedesk - Knowledge Base WordPress Theme
  3. doc_img Wish - Charity WordPress Theme
  4. doc_img Restore - Computer, Mobile & Digital Repair Service WordPress Theme
  5. doc_img Greenlife - Nature & Environmental WP Theme
  6. doc_img Appeal – Fully Functional Petition WordPress Theme
  1. doc WooCommerce Product FAQ Manager
  2. doc Attachment Tab For Woocommerce
  3. doc BWL Knowledge Base Manager
  4. doc BWL Advanced FAQ Manager
  5. doc BWL Post To Breaking News Manager
  6. doc BWL Pro Voting Manager
  7. doc BWL Poll Manager
  1. doc_img Cobbler Master - Shoe Repair and Leather Accessories Service Center
  2. doc_img Repair Geek - Laptop And Computer Fixing Service Center HTML5 Template
  3. doc_img Generosity - Charity, Fundraising & Non-Profit HTML5 Template
  4. doc_img Auto Repair - Maintenance and Mechanic Center HTML5 Template
  5. doc_img Bicycle Fix - Bicycle Repair, Maintenance and Tune-Ups Shop HTML5 Template
  6. doc_img Fit Bone - Physiotherapy and Massage Therapy Center
  7. doc_img Mind Trainer - Psychology and Counseling Center HTML5 Template
  8. doc_img Senior Care - Senior Citizens & Elders Support HTML5 Template
  9. doc_img Greenlife - Nature & Environmental Non-Profit HTML5 Template
  10. doc_img Knowledge Desk - Responsive Knowledgebase HTML5 Template