contact.ejs 10.2 KB
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Contact Us - Leadstec</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="Leads Technologies Ltd.,Leadstec,Contact Us,Contact Information,Company Address,Phone Number,Company Email,Experience Product,After-sales Service, Training,Cooperation Consultation,Message" name="keywords">
  <meta content="Welcome to contact Leadstec by phone, email or message for product consultation, cooperation negotiation, advice and after-sales service." name="description">

  <!-- Favicons -->
  <link href="../img/favicon.ico" rel="icon">
  <link href="../img/apple-touch-icon.png" rel="apple-touch-icon">

  <%- include('headlib'); -%>

</head>

<body>

  <!--==========================
  Header
  ============================-->
  <header id="header" class="fixed-top">
    <%- include('header'); -%>
  </header><!-- #header -->

  <!--==========================
    Intro Section
  ============================-->

  <main id="main">

        <section id="map" class="clearfix">
            
          <header class="section-header">
        <h3>Location</h3>
        </header>
        
            <div class="container">         
            <div class="row">
                
                <div class="col-md-4">
                    <div id="allmap" ></div>                        
                    <h4 class="font-bold">Guangzhou</h4><br/>
                    
                    <i class="ion-ios-location-outline"></i>
                    <div class="address">
                        <span>Add: </span><span>Room 903A Fuli Commercial Building,23 Zhongshanba Road,Liwan District,Guangzhou</span><br/><br/>
                    </div>
                    
                    <i class="ion-ios-telephone-outline"></i>
                    <span>Tel:</span><span>020-81000647</span><br/><br/>
                    
                    <i class="ion-ios-email-outline"></i>
                    <span>E-mail: </span><span>gzhr@leadstec.com</span><br/><br/>
                </div>
                
                <div class="col-md-4">
                    <div id="allmap1" ></div>
                    <h4 class="font-bold">Hong Kong</h4><br/>
                    
                    <i class="ion-ios-location-outline"></i>
                    <div class="address">
                        <span>Add: </span><span>Room 1102,11/F,88 Gloucester Road,Wan Chai,Hong Kong</span><br/><br/>
                    </div>
                    
                    <i class="ion-ios-telephone-outline"></i>
                    <span>Tel: </span><span>+852 3483 6928</span><br/><br/>
                    
                    <i class="ion-ios-email-outline"></i>
                    <span>E-mail: </span><span>hkhr@leadstec.com</span><br/><br/>
                </div> 
                
                <div class="col-md-4">
                    <div id="allmap2" ></div>

                    <h4 class="font-bold">Beijing</h4><br/>
                    
                    <i class="ion-ios-location-outline"></i>
                    <div class="address">
                        <span>Add: </span><span>Room 1112, Block A, Tower 1, WangJing SOHO, 10 WangJing Street, ChaoYang District, Beijing</span><br/><br/>
                    </div>
                    
                    <i class="ion-ios-telephone-outline"></i>
                    <span>Tel: </span><span>010-6482 0755</span><br/><br/>
                    
                    <i class="ion-ios-email-outline"></i>
                    <span>E-mail: </span><span>gzhr@leadstec.com</span><br/><br/>
                </div> 
                
            </div>
        </div>
        </section><!-- #map -->
        
        <!--==========================
      Contact Section
    ============================-->
    <section id="contact" class="section-bg">
      <div class="container-fluid">

        <div class="section-header">
          <h3>Contact Us</h3>
          <p>Experience products, after-sales service, cooperation and consultation, etc</p>
        </div>

        <div class="row wow">
          <div class="col-lg-12">
            <div class="form">
              <div class="container">
                <form action="/sendmail" method="post" role="form" class="contactForm">
                
                    <div class="form-row">
                      <div class="form-group col-lg-6">
                        <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:1" data-msg="Please input your name" />
                        <div class="validation"></div>
                      </div>
                      <div class="form-group col-lg-6">
                        <input type="text" class="form-control" name="company" id="company" placeholder="Your Company" data-rule="minlen:1" data-msg="Please input your company" />
                        <div class="validation"></div>
                      </div>
                    </div>
                    
                    <div class="form-row">
                      <div class="form-group col-lg-6">
                        <input type="text" name="phone" class="form-control" id="phone" placeholder="Your Phone" data-rule="minlen:11" data-msg="Please input correct phone number" />
                        <div class="validation"></div>
                      </div>
                      <div class="form-group col-lg-6">
                        <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please input your email" />
                        <div class="validation"></div>
                      </div>
                    </div>
    
                    <div class="form-group">
                      <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please input your message" placeholder="Message"></textarea>
                      <div class="validation"></div>
                    </div>
                    
                    <div class="text-center"><button type="submit" title="Send Message">Send Message</button></div>
                    
                  </form>
                  <div id="sendmessage" class="alert-success">Thank you for your message. We will process it as soon as possible.</div>
                  <div id="errormessage" class="alert-warning">lease resend the message or contact us by other ways.</div>
              </div>
            </div>
          </div>

        </div>

      </div>
    </section><!-- #contact -->
        
  </main>

  <!--==========================
    Footer
  ============================-->
  <footer id="footer">
    <%- include('footer'); -%>
  </footer><!-- #footer -->

  <a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
  <!-- Uncomment below i you want to use a preloader -->
  <!-- <div id="preloader"></div> -->

  <!-- JavaScript Libraries -->

  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=6cUVhjdSzUgs8dj6vFVauUQfBUy9i3Go"></script>
  <script type="text/javascript" src="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
  <link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

        <%- include('footlib'); -%> 
  
      <script type="text/javascript">
        // 百度地圖API功能,此處為廣州地圖
        var longitude = 113.246062;
        var latitude = 23.131221;
        var zoom = 14;

        var poi = new BMap.Point(longitude,latitude);
        var map = new BMap.Map("allmap");    // 創建Map實例
        map.centerAndZoom(poi, zoom);  // 初始化地圖,設置中心點坐標和地圖級別
        //map.addControl(new BMap.MapTypeControl());   //添加地圖類型控件
        map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]})); 
        map.setCurrentCity("廣州");          // 設置地圖顯示的城市 此項是必須設置的
        map.enableScrollWheelZoom(true);     //開啟鼠標滾輪縮放

        var marker = new BMap.Marker(poi); //創建marker對象
       // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //marker跳動動畫,這裏刪除
        map.addOverlay(marker); //在地圖中添加marker
        //香港地圖
        var longitude1 = 114.184798;
        var latitude1 = 22.281935;
        var zoom1 = 16;//由於地圖顯示的問題,此處改為16

        var poi1 = new BMap.Point(longitude1,latitude1);
        var map1= new BMap.Map("allmap1");    // 創建Map實例
        map1.centerAndZoom(poi1, zoom1);  // 初始化地圖,設置中心點坐標和地圖級別
        //map1.addControl(new BMap.MapTypeControl());   //添加地圖類型控件
        map1.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]})); 
        map1.setCurrentCity("香港");          // 設置地圖顯示的城市 此項是必須設置的
        map1.enableScrollWheelZoom(true);     //開啟鼠標滾輪縮放

        var marker1 = new BMap.Marker(poi1); //創建marker對象
        //marker1.setAnimation(BMAP_ANIMATION_BOUNCE); //marker跳動動畫,這裏刪除
        map1.addOverlay(marker1); //在地圖中添加marker
        //北京地圖
        var longitude2 = 116.487922;
        var latitude2 = 40.002213;
        var zoom2 = 16;

        var poi2 = new BMap.Point(longitude2,latitude2);
        var map2= new BMap.Map("allmap2");    // 創建Map實例
        map2.centerAndZoom(poi2, zoom2);  // 初始化地圖,設置中心點坐標和地圖級別
        //map2.addControl(new BMap.MapTypeControl());   //添加地圖類型控件
        map2.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]})); 
        map2.setCurrentCity("廣州");          // 設置地圖顯示的城市 此項是必須設置的
        map2.enableScrollWheelZoom(true);     //開啟鼠標滾輪縮放

        var marker2 = new BMap.Marker(poi2); //創建marker對象
       // marker2.setAnimation(BMAP_ANIMATION_BOUNCE); //marker跳動動畫,這裏刪除
        map2.addOverlay(marker2); //在地圖中添加marker
       
        
    </script>
  

</body>

</html>