Web偏傳統網站模板

時間 2019-11-14

標籤 web 傳統網站模板欄目 HTML 简体版

原文原文鏈接

傳統網站更應該注意的是數據緩存，加載速度，SEO優化等關鍵點。javascript

　　SEO：純前端開發來應用的話要注意幾點 h1 h2 標籤的使用，圖片保證alt屬性網站TDK的內容，要簡潔關鍵詞突出。內鏈外鏈的數量，能夠捨身處境的想象一下，如何讓爬蟲有更多機會爬到本身的網站，又如何讓爬蟲更多的爬到而且儘可能不爬出去，一直在你的網站打轉，SEO的確有不少講究。css

網站模板的做用在於，前端搭好這個框架，後臺數據來控制和更改整個網站的內容、若是整個後臺數據都被改變，列如主頁banner圖，logo ，網站title 等等相關的，那麼這個將改變整個網站的主題，成爲一個新站。html

那麼創建一個這樣的模板架第一步要如何開始呢？前端

　　　一、java

每一個頁面都分爲如下幾個文件：jquery

　　　index.html 放置json數據，這個網頁當前須要的數據，或者總體的公共數據。將如下全部文件都引入進來git

　　　body.html 網站的樣式github

　　　js/index.js　當前頁面的js文件ajax

　　　css/index.css 當前頁面的csschrome

　　二、

↑ 若是一些css文件在每一個頁面中都要使用，那麼設立一個global.css 在文件中引入全部css ，方便每一個頁面調用global.css便可。

↑ JS文件：截圖中的99_global.js 中能夠寫入公共的js腳本，其餘js能夠選擇性的寫進頁面中。

注：全部的引入都要在index.html中進行。

例：

這個站點中沒有使用UI庫，全部操做都是現手寫，因此採用了網址形式引入的Jquery。

index.html中的格式爲：

<html>

　　 <body>

　　　　<div id="content"></div> 　　　　//將body.html內容放置在此div中

　　　　　　var data = {　　　　　　　　// 放置json數據

　　　　　　　　current_user:{

　　　　　　　　　　　　　id:1,

　　　　　　　　　　　　　email:'tomLu@gmail.com.cn'

　　　　　　　　　　}

　　　　</script>

　　　　<script type="text/javascript" src="js/index.js"></script> // 請在這裏引入此頁面的index.js 必須嚴格按照全部的引入順序與位置

$(function() {　　　　　　　　　　　　　　　　　　//引入body.html的內容放置在id="content"中的元素內

　　$('#content').load("body.html", function() {

　　　　　　render();

　　});

　　　　</script>

　　</body>

</html>

body.html內直接寫入元素便可。

index.js :

js中寫入對json數據的插入 ↑

　　　　列：

　　　　　　　　var text = $("#text").html();

　　　　　　　　$.each(data.textData , function(){

　　　　　　　　　　$("#text_cycle").append(Mustache.render( textData , this ))

　　　　　　　　})

在body.html中用

　　　　</script>

　　　　</div>

　　造成循環index.html中的textData這個json數據。

下面是其中一個單頁面的總體步驟：

Home主頁格式：

index.html 存放json數據

 
  <! 
  DOCTYPE 
  html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 

 
  < 
  head 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "IE=9; IE=8; IE=7; IE=EDGE" 
  > 
 
 
  < 
  meta 
  charset= 
  "utf-8" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "IE=edge,chrome=1" 
  /> 
 
 
  <!-- <meta http-equiv="X-UA-Compatible" content="IE=8" /> --> 
 

 
  < 
  title 
  >De Anza Oaks 
  </ 
  title 
  > 
 
 
  < 
  link 
  rel= 
  "stylesheet" 
  href= 
  "/global.css" 
  > 
 
 
  < 
  link 
  rel= 
  "stylesheet" 
  href= 
  "css/index.css" 
  > 
 
 
  < 
  link 
  rel= 
  "shortcut icon" 
  href= 
  "#" 
  /> 
 
 
  <!-- <link rel="stylesheet" href="css/jalendar.css"> --> 
 

 
  < 
  script 
  src= 
  "https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js" 
  > 
  < 
  / 
  script 
  > 
 
 
  < 
  script 
  src= 
  "https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js" 
  > 
  < 
  / 
  script 
  > 
 

 
  <!-- Links as currently hosted by http-server --> 
 
 
  < 
  script 
  src= 
  "/js/10_masterslider.min.js" 
  > 
  < 
  / 
  script 
  > 
 
 
  < 
  script 
  src= 
  "/js/11_calendar_plugin.js" 
  > 
  < 
  / 
  script 
  > 
 
 
  < 
  script 
  src= 
  "/js/99_global.js" 
  > 
  < 
  / 
  script 
  > 
 
 
  </ 
  head 
  > 
 

 
  < 
  body 
  > 
 
 
  < 
  div 
  id= 
  "content" 
  ></ 
  div 
  > 
 

 
  < 
  script 
  > 
 
 
  // This script block stays in this wrapper html file 
 
 
  var 
  data = { 
 
 
  _current_user: { 
 
 
  id: 
  '1234', 
 
 
  email: 
  'test@example.com', 
 
 
  display_name: 
  'Laurie01', 
 
 
  first_name: 
  'Laurie', 
 
 
  last_name: 
  'Williams', 
 
 
  is_admin: 
  true 
 

   }, 
 
 
  // _current_user: null, 
 
 
  banner_img: [{ 
 
 
  id: 
  1, 
 
 
  img_url: 
  '/community/img/doorway.jpg' 
 

   }], 
 
 
  provenance: [{ 
 
 
  id: 
  1, 
 
 
  provenance_url: 
  '/community/img/tellus.png', 
 
 
  alt: 
  'Powered-by-Tellus' 
 

   }], 
 
 
  _metadata: { 
 
 
  root_url: 
  'http://127.0.0.1:8080', 
 
 
  page_path: 
  '/home', 
 
 
  assets_path: 
  '', 
 
 
  site_name: 
  'De Anza Oaks', 
 
 
  environment: 
  'dev', 
 

   }, 
 
 
  community_news: [{ 
 
 
  id: 
  1, 
 
 
  title: 
  "WHAT'S NEW AT DE ANZA OAKS" 
 

   }], 
 

     
 

   } 
 

 
  < 
  / 
  script 
  > 
 

 
  < 
  script 
  type= 
  "text/javascript" 
  src= 
  "js/index.js" 
  > 
  < 
  / 
  script 
  > 
 
 
  < 
  script 
  > 
 
 
  // This script block stays in this wrapper html file 
 
 
  $( 
  function() { 
 
 
  $( 
  '#content'). 
  load( 
  "body.html", 
  function() { 
 
 
  render(); 
 

   }); 
 

   }); 
 

 
  < 
  / 
  script 
  > 
 

 
  </ 
  body 
  > 
 

 
  </ 
  html 
  > 
 

body.html 存放主頁樣式

 
  <!-- header --> 
 
  < 
  div 
  class= 
  "header" 
  > 
 
  </ 
  div 
  > 
 
  <!-- swiper --> 
 
  < 
  div 
  class= 
  "master-slider ms-skin-default" 
  id= 
  "masterslider" 
  > 
 
  < 
  div 
  class= 
  "ms-slide" 
  id= 
  "banner_img_cycle" 
  > 
 
  < 
  script 
  id= 
  "banner_img" 
  type= 
  "txt/template" 
  > 
 
   <img src="{{img_url}}"/> 
 
  </ 
  script 
  > 
 
  </ 
  div 
  > 
 
  < 
  div 
  class= 
  "mas-ab" 
  > 
 
  < 
  div 
  class= 
  "w1200 pr" 
  > 
 
  < 
  div 
  id= 
  "provenance_cycle" 
  > 
 
  < 
  script 
  id= 
  "provenance" 
  type= 
  "txt/template" 
  > 
 
   <img src="{{provenance_url}}" alt="{{alt}}"> 
 
  </ 
  script 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  < 
  div 
  class= 
  "main" 
  > 
 
  <!-- body-1 --> 
 
  < 
  div 
  class= 
  "main-top body-one" 
  > 
 
  < 
  div 
  class= 
  "w1200 pr" 
  > 
 
  < 
  div 
  class= 
  "main-left body-left" 
  style= 
  " 
   margin-top: 10px;" 
  > 
 
  < 
  div 
  class= 
  "main-left-contents" 
  > 
 
  < 
  p 
  id= 
  "CommunityNews_cycle" 
  > 
 
  < 
  script 
  id= 
  "CommunityNews" 
  type= 
  "txt/template" 
  > 
 
   {{title}} 
 
  </ 
  script 
  > 
 
  </ 
  p 
  > 
 
  < 
  ul 
  id= 
  "events_photo" 
  > 
 
  < 
  script 
  id= 
  "event_template" 
  type= 
  "txt/template" 
  > 
 
   <li class="main-left-content-list" > 
 
   <a class="body1-a jump" data={{link}} href="javascript:;"> 
 
   <p> {{title}}&nbsp;({{num}})</p></a> 
 
   </li> 
 
  </ 
  script 
  > 
 
  </ 
  ul 
  > 
 
  </ 
  div 
  > 
 
  < 
  div 
  class= 
  "main-right-content main_right" 
  > 
 
  < 
  div 
  class= 
  "main-list" 
  > 
 
  < 
  ul 
  id= 
  "featureList" 
  > 
 
  < 
  script 
  id= 
  "featureList_template" 
  type= 
  "txt/template" 
  > 
 
   <li class="main-list" animated zoomIn"> 
 
   <a data={{link}} href="javascript:;" class="main-list-a jump"> 
 
   <p style="background:url('{{img}}') no-repeat center 50px">{{category}}</p> 
 
   </a> 
 
   </li> 
 
  </ 
  script 
  > 
 
  </ 
  ul 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  <!-- body-2 --> 
 
  < 
  div 
  class= 
  "main-top body_two" 
  > 
 
  < 
  div 
  class= 
  "w1200 pr" 
  > 
 
  < 
  div 
  class= 
  "main-left body-left" 
  > 
 
  < 
  div 
  class= 
  "main-left-content swiper-container jump" 
  data= 
  "./amenities" 
  > 
 
  < 
  div 
  id= 
  "Amenities_title_cycle" 
  > 
 
  < 
  script 
  id= 
  "Amenities_title" 
  type= 
  "txt/template" 
  > 
 
   {{title}} 
 
  </ 
  script 
  > 
 
  </ 
  div 
  > 
 
  < 
  ul 
  id= 
  "Amenities_cycle" 
  class= 
  "Carousel swiper-wrapper" 
  > 
 
  < 
  script 
  id= 
  "Amenities" 
  type= 
  "txt/template" 
  > 
 
   <li class="swiper-slide" style="background: url('{{img_url}}') no-repeat; background-size: cover;"> 
 
   <div> 
 
   <h6>{{name}}</h6> 
 
   </div> 
 
   </li> 
 
  </ 
  script 
  > 
 
  </ 
  ul 
  > 
 
  </ 
  div 
  > 
 
  < 
  div 
  class= 
  "announcement-tips swiper-pagination" 
  ></ 
  div 
  > 
 
  < 
  div 
  class= 
  "main-right-content main_display" 
  > 
 
  < 
  div 
  id= 
  "myId" 
  class= 
  "jalendar" 
  > 
 
  < 
  div 
  id= 
  "calendar_cycle" 
  > 
 
  < 
  script 
  id= 
  "calendar_left" 
  type= 
  "txt/template" 
  > 
 
   <div 
 
   class="added-event" 
 
   data-name="{{creator}}" 
 
   data-date="{{date}}" 
 
   data-time="{{time}}" 
 
   data-title="{{title}}" 
 
   data-content="{{abbreviated_body}}" 
 
   data-place="{{location}}"> 
 
   </div> 
 
  </ 
  script 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  < 
  div 
  class= 
  "calendar-right-FF" 
  > 
 
  < 
  div 
  class= 
  "calendar-right" 
  id= 
  "date" 
  > 
 
  < 
  script 
  id= 
  "date_template" 
  type= 
  "txt/template" 
  > 
 
   <div class="jump" data="activities/calendar"> 
 
   <p>{{friendly_date}}</p> 
 
   <p> 
 
   <span>{{title}}</span> 
 
   <a href="javascript:;">more</a> 
 
   </p> 
 
   </div> 
 
  </ 
  script 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  <!-- body-3 --> 
 
  < 
  div 
  class= 
  "main-top body-one" 
  id= 
  "Reservables_cycle" 
  > 
 
  < 
  script 
  id= 
  "Reservables" 
  type= 
  "txt/template" 
  > 
 
   <div class="w1200 pr"> 
 
   <img src="{{img_url}}" alt="Rectangle" class="w1200_img"> 
 
   <div class="reservable"> 
 
   <a data="{{reservation_link}}" class="jump" href="javascript:;"> 
 
   <p> 
 
   Click Here To Book The {{name}} 
 
   </p> 
 
   </a> 
 
   </div> 
 
   </img> 
 
   </div> 
 
  </ 
  script 
  > 
 
  </ 
  div 
  > 
 
  < 
  div 
  class= 
  "map_img" 
  id= 
  "birds_eye_view_cycle" 
  > 
 
  < 
  script 
  id= 
  "birds_eye_view" 
  type= 
  "txt/template" 
  > 
 
   <!-- <div class="w1200_FF"> --> 
 
   <div class="w1200 pr w1200-view" id=""> 
 
   <img src="{{img_url}}" alt="Aerial view of the residential area"> 
 
   <div class="view-p"> 
 
   <p> 
 
   {{title}} 
 
   </p> 
 
   </div> 
 
   <!-- </div> --> 
 
   </div> 
 
  </ 
  script 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  <!-- <div class="login-2"> 
 
   <h3 class="login-H3-2">Lost Password Help</h3> 
 
   <p class="return"><img src="/community/img/Bounced.png" alt="Bounced"></p> 
 
   <p class="login2-p"> 
 
   Fill out the below information and your username and password will be sent to your originally specified email 
 
   address 
 
   </p> 
 
   <input class="login-int2" type="text" placeholder="Name"><br /> 
 
   <p class="login-Or">Or</p> 
 
   <input class="login-int-a2" type="text" placeholder="Password"> 
 
   <input class="login-int-a3" type="text" placeholder="Password"> 
 
   <button class="login-button2">Submit</button> 
 
  </div> --> 
 
  <!-- footer --> 
 
  < 
  div 
  class= 
  "footer" 
  > 
 
  < 
  p 
  > 
 
   Copyright © 2019 Tellus, Inc. All Rights Reserved. 
 
  </ 
  p 
  > 
 
  </ 
  div 
  >

index.js 用了jquery便於查看簡單易懂

 
  var 
  render = 
  function() { 
 
 
  _pre_render(); 
 
 
  // Render page 
 
 
  var 
  event_template = 
  $( 
  '#event_template'). 
  html(); 
 
 
  var 
  featureList_template = 
  $( 
  '#featureList_template'). 
  html() 
 
 
  var 
  date_template = 
  $( 
  '#date_template'). 
  html() 
 
 
  Mustache. 
  parse( 
  event_template); 
 
 
  Mustache. 
  parse( 
  featureList_template); 
 
 
  Mustache. 
  parse( 
  date_template); 
 
 
  $. 
  each( 
  data. 
  shortcuts, 
  function() { 
 
 
  $( 
  '#events_photo'). 
  append( 
  Mustache. 
  render( 
  event_template, 
  this)); 
 

   }); 
 
 
  $. 
  each( 
  data. 
  feature_list, 
  function() { 
 
 
  $( 
  '#featureList'). 
  append( 
  Mustache. 
  render( 
  featureList_template, 
  this)); 
 

   }); 
 
 
  $. 
  each( 
  data. 
  feature_list, 
  function( 
  index, 
  item) { 
 
 
  $( 
  '#featureList li'). 
  eq( 
  index). 
  find( 
  'p'). 
  hover( 
  function() { 
 
 
  $( 
  this). 
  css( 
  'background', 
  `url( 
  ${ 
  item. 
  active_img 
  } 
  ) no-repeat center 50px`) 
 

   }, 
  function() { 
 
 
  $( 
  this). 
  css( 
  'background', 
  `url( 
  ${ 
  item. 
  img 
  } 
  ) no-repeat center 50px`) 
 

   }) 
 

   }) 
 
 
  $. 
  each( 
  data. 
  events, 
  function() { 
 
 
  $( 
  '#date'). 
  append( 
  Mustache. 
  render( 
  date_template, 
  this)); 
 

   }); 
 

 
  var 
  Reservables = 
  $( 
  '#Reservables'). 
  html() 
 
 
  $. 
  each( 
  data. 
  amenities. 
  filter( 
  a 
  => 
  a. 
  reservable), 
  function() { 
 
 
  $( 
  '#Reservables_cycle'). 
  append( 
  Mustache. 
  render( 
  Reservables, 
  this)); 
 

   }); 
 

 
  var 
  birds_eye_view = 
  $( 
  '#birds_eye_view'). 
  html() 
 
 
  $. 
  each( 
  data. 
  birds_eye_view, 
  function() { 
 
 
  $( 
  '#birds_eye_view_cycle'). 
  append( 
  Mustache. 
  render( 
  birds_eye_view, 
  this)); 
 

   }); 
 

 
  var 
  Amenities = 
  $( 
  '#Amenities'). 
  html() 
 
 
  $. 
  each( 
  data. 
  amenities, 
  function() { 
 
 
  $( 
  '#Amenities_cycle'). 
  append( 
  Mustache. 
  render( 
  Amenities, 
  this)); 
 

   }); 
 

 
  var 
  CommunityNews = 
  $( 
  '#CommunityNews'). 
  html() 
 
 
  $. 
  each( 
  data. 
  community_news, 
  function() { 
 
 
  $( 
  '#CommunityNews_cycle'). 
  append( 
  Mustache. 
  render( 
  CommunityNews, 
  this)); 
 

   }); 
 

 
  var 
  Amenities_title = 
  $( 
  '#Amenities_title'). 
  html() 
 
 
  $. 
  each( 
  data. 
  amenities_title, 
  function() { 
 
 
  $( 
  '#Amenities_title_cycle'). 
  append( 
  Mustache. 
  render( 
  Amenities_title, 
  this)); 
 

   }); 
 

 
  var 
  banner_img = 
  $( 
  '#banner_img'). 
  html() 
 
 
  $. 
  each( 
  data. 
  banner_img, 
  function() { 
 
 
  $( 
  '#banner_img_cycle'). 
  append( 
  Mustache. 
  render( 
  banner_img, 
  this)); 
 

   }); 
 

 
  var 
  provenance = 
  $( 
  '#provenance'). 
  html() 
 
 
  $. 
  each( 
  data. 
  provenance, 
  function() { 
 
 
  $( 
  '#provenance_cycle'). 
  append( 
  Mustache. 
  render( 
  provenance, 
  this)); 
 

   }); 
 
 
  //calendar 
 
 
  var 
  calendar = 
  $( 
  '#calendar_left'). 
  html(); 
 
 
  Mustache. 
  parse( 
  calendar); 
 
 
  $. 
  each( 
  data. 
  events, 
  function() { 
 
 
  $( 
  '#calendar_cycle'). 
  append( 
  Mustache. 
  render( 
  calendar, 
  this)); 
 

   }); 
 

 
  // Global post render 
 
 
  _post_render(); 
 

 
  // Local post render 
 
 
  $. 
  getScript( 
  ` 
  ${ 
  data. 
  _metadata. 
  assets_path 
  }${ 
  data. 
  _metadata. 
  page_path 
  } 
  /js/swiper.min.js`, 
  function() {　　//這裏做用於引入這個js腳本 和使用腳本中的功能 
 
 
  //Carousel 
 
 
  var 
  swiper = 
  new 
  Swiper( 
  '.swiper-container', { 
 
 
  width: 
  412, 
 
 
  spaceBetween: 
  23, 
 
 
  centeredSlides: 
  true, 
 
 
  autoplay: { 
 
 
  delay: 
  2500, 
 
 
  disableOnInteraction: 
  false, 
 

   }, 
 
 
  pagination: { 
 
 
  el: 
  '.swiper-pagination', 
 
 
  clickable: 
  true, 
 

   } 
 

   }); 
 

   }); 
 
 
  $. 
  jqLoadFix = 
  function() { 
 
 
  if ( 
  this. 
  complete) { 
 
 
  var 
  that = 
  this; 
 

   } 
 

   } 
 
 
  $. 
  getScript( 
  ` 
  ${ 
  data. 
  _metadata. 
  assets_path 
  }${ 
  data. 
  _metadata. 
  page_path 
  } 
  /js/jalendar.js`, 
  function() { 
 
 
  $( 
  function() { 
 
 
  $( 
  '#myId'). 
  jalendar({ 
 
 
  // customDay: '2017/12/01', // Format: Year/Month/Day 
 
 
  color: 
  '#6AA666', 
  // Unlimited Colors 
 
 
  // lang: 'EN' // Format: English — 'EN', Türkçe — 'TR' 
 

   }); 
 

   }); 
 

   }); 
 

 
  $( 
  '#calendar'). 
  calendar({ 
 
 
  ifSwitch: 
  true, 
  // Whether to switch the month 
 
 
  hoverDate: 
  true, 
  // hover Whether to display the day information 
 
 
  backToday: 
  true 
  // Whether to return to the day 
 

   }); 
 

 
  var 
  slider = 
  new 
  MasterSlider(); 
 
 
  slider. 
  setup( 
  'masterslider', { 
 
 
  width: 
  1920, 
  // slider standard width 
 
 
  height: 
  500, 
  // slider standard height 
 
 
  mouse: 
  false, 
 
 
  autoplay: 
  false, 
 
 
  loop: 
  true, 
 
 
  overPause: 
  false, 
 
 
  speed: 
  13 
 

   }); 
 

 
  //banner 
 
 
  MSScrollParallax. 
  setup( 
  slider, 
  60, 
  100, 
  true); 
 
 
  slider. 
  control( 
  'arrows'); 
 
 
  var 
  i = 
  1, 
 
 
  ileng = 
  $( 
  '.ms-slide'). 
  length; 
 

 
  $( 
  '.main-switch-top a'). 
  click( 
  function() { 
 
 
  $( 
  this). 
  addClass( 
  'curr'). 
  siblings(). 
  removeClass( 
  'curr'); 
 
 
  var 
  manin = 
  $( 
  this). 
  index(); 
 
 
  $( 
  '.main-switch-item'). 
  hide(); 
 
 
  $( 
  '.main-switch-item'). 
  eq( 
  manin). 
  fadeIn(); 
 

   }) 
 

 
  // time 
 
 
  function 
  timebar() { 
 
 
  $( 
  '.mas-tib'). 
  stop(). 
  animate({ 
 
 
  'width' 
  : 
  350 + 
  'px' 
 

   }, 
  6000). 
  animate({ 
 
 
  'width' 
  : 
  0 
 

   }, 
  0); 
 
 
  $( 
  '.ms-nav-next'). 
  click(); 
 

   }; 
 

 
  function 
  clickAdd() { 
 
 
  $( 
  '#masterslider'). 
  delegate( 
  '.ms-nav-next', 
  'click', 
  function() { 
 
 
  i++; 
 
 
  if ( 
  i > 
  ileng) { 
 
 
  i = 
  1; 
 

   }; 
 
 
  $( 
  '.ban-len i'). 
  html( 
  i); 
 

   }) 
 

   }; 
 

 
  function 
  clickReduce() { 
 
 
  $( 
  '#masterslider'). 
  delegate( 
  '.ms-nav-prev', 
  'click', 
  function() { 
 
 
  i--; 
 
 
  if ( 
  i < 
  1) { 
 
 
  i = 
  ileng; 
 

   }; 
 
 
  $( 
  '.ban-len i'). 
  html( 
  i); 
 

   }) 
 

   }; 
 

 
  setInterval( 
  timebar, 
  6000); 
 
 
  $( 
  '.ban-len span'). 
  html( 
  ileng); 
 
 
  clickReduce(); 
 
 
  clickAdd(); 
 

 
  var 
  str = 
 
 
  `<div class="db"> 
 
 
   <div class="login"> 
 
 
   <h3 class="login-H3">De Anza Oaks HOA</h3> 
 
 
   <p class="return"><img src="/community/img/Bounced.png" alt="Bounced"></p> 
 
 
   <input class="login-int" type="text" placeholder="Name"><br /> 
 
 
   <p class="username">Please enter your user name</p> 
 
 
   <input class="login-int-a" type="password" placeholder="Password"> 
 
 
   <p class="userp">Please enter your password</p> 
 
 
   <button class="login-button">Login</button> 
 
 
   <div class="login-div"> 
 
 
   <p class="login-a">Forgot your Password?</p> 
 
 
   </div> 
 
 
   </div> 
 
 
   </div>`; 
 

 
  var 
  handleRemoteLogin = 
  function() { 
 
 
  var 
  email = 
  $( 
  '.login-int'). 
  val(); 
 
 
  var 
  password = 
  $( 
  '.login-int-a'). 
  val(); 
 

 
  submitDynamicForm( 
 
 
  data. 
  _metadata. 
  root_url + 
  '/session', 
 
 
  'POST', 
 

   [{ 
 
 
  name: 
  'session_form[email]', 
 
 
  value: 
  email 
 

   }, 
 

   { 
 
 
  name: 
  'session_form[password]', 
 
 
  value: 
  password 
 

   }, 
 

   ] 
 

   ); 
 

   } 
 

 
  var 
  handleLogin = 
  function() { 
 
 
  if (! 
  $( 
  '.login-int'). 
  val() && ! 
  $( 
  '.login-int-a'). 
  val()) { 
 
 
  $( 
  '.userp'). 
  css( 
  'display', 
  'block'); 
 
 
  $( 
  '.username'). 
  css( 
  'display', 
  'block') 
 
 
  $( 
  '.login'). 
  css( 
  'height', 
  '360') 
 

   } 
  else 
  if ( 
  $( 
  '.login-int'). 
  val() === 
  'Test' && 
  $( 
  '.login-int-a'). 
  val() !== 
 
 
  '1215' || 
  $( 
  '.login-int'). 
  val() === 
  'admin' && 
  $( 
  '.login-int-a'). 
  val() !== 
 
 
  '1215') { 
 
 
  $( 
  '.username'). 
  css( 
  'display', 
  'none') 
 
 
  $( 
  '.userp'). 
  css( 
  'display', 
  'block') 
 
 
  $( 
  '.login'). 
  css( 
  'height', 
  '330') 
 

   } 
  else 
  if ( 
  $( 
  '.login-int-a'). 
  val() === 
  '1215' && 
  $( 
  '.login-int'). 
  val() !== 
 
 
  'Test' || 
  $( 
  '.login-int-a'). 
  val() === 
  '1215' && 
  $( 
  '.login-int'). 
  val() !== 
 
 
  'admin') { 
 
 
  $( 
  '.username'). 
  css( 
  'display', 
  'block'); 
 
 
  $( 
  '.userp'). 
  css( 
  'display', 
  'none'); 
 
 
  $( 
  '.login'). 
  css( 
  'height', 
  '330') 
 

   } 
  else 
  if ( 
  $( 
  '.login-int'). 
  val() !== 
  "Test" && 
  $( 
  '.login-int-a'). 
  val() === 
 
 
  " " || 
  $( 
  '.login-int'). 
  val() !== 
  "admin" && 
  $( 
  '.login-int-a'). 
  val() === 
 
 
  " ") { 
 
 
  $( 
  '.login'). 
  css( 
  'height', 
  '360') 
 

   } 
  else 
  if ( 
  $( 
  '.login-int'). 
  val() !== 
  "Test" && 
  $( 
  '.login-int-a'). 
  val() !== 
 
 
  "1215" || 
  $( 
  '.login-int'). 
  val() !== 
  "admin" && 
  $( 
  '.login-int-a'). 
  val() !== 
 
 
  "1215") { 
 
 
  $( 
  '.username'). 
  css( 
  'display', 
  'block'); 
 
 
  $( 
  '.userp'). 
  css( 
  'display', 
  'block'); 
 
 
  $( 
  '.login'). 
  css( 
  'height', 
  '360') 
 

   } 
  else 
  if ( 
  $( 
  '.login-int'). 
  val() === 
  " " && 
  $( 
  '.login-int-a'). 
  val() !== 
 
 
  "1215") { 
 
 
  $( 
  '.login'). 
  css( 
  'height', 
  '360') 
 

   } 
  else { 
 
 
  if ( 
  $( 
  '.login-int'). 
  val() !== 
  'Test' || 
  $( 
  '.login-int'). 
  val() !== 
 
 
  'admin') { 
 
 
  $( 
  '.username'). 
  css( 
  'display', 
  'block') 
 
 
  $( 
  '.login'). 
  css( 
  'height', 
  '330') 
 

   } 
  else 
  if ( 
  $( 
  '.login-int-a'). 
  val() !== 
  '1215') { 
 
 
  $( 
  '.userp'). 
  css( 
  'display', 
  'block') 
 
 
  $( 
  '.login'). 
  css( 
  'height', 
  '330') 
 

   } 
 

   } 
 

   } 
 

 
  var 
  handleFormEnter = 
  function() { 
 
 
  if (!! 
  $( 
  '.login-int'). 
  val() && !! 
  $( 
  '.login-int-a'). 
  val()) { 
 
 
  if ( 
  data. 
  _metadata. 
  environment === 
  'dev') { 
 
 
  if (!! 
  $( 
  '.login-int'). 
  val() && !! 
  $( 
  '.login-int-a'). 
  val()) { 
 
 
  // TODO: log in user 
 
 
  var 
  email = 
  $( 
  '.login-int'). 
  val(); 
 
 
  var 
  password = 
  $( 
  '.login-int-a'). 
  val(); 
 
 
  logInUser( 
  email, 
  password); 
 

   } 
  else { 
 
 
  handleLogin() 
 

   } 
 

   } 
  else { 
 
 
  handleRemoteLogin() 
 

   } 
 

   } 
 

   } 
 

 
  var 
  username = 
  data. 
  _current_user && 
  data. 
  _current_user. 
  display_name 
 

 
  $( 
  '.jump'). 
  click( 
  function() { 
 
 
  var 
  arr = 
  $( 
  this). 
  attr( 
  'data') 
 
 
  if ( 
  username || [ 
  './city-resources', 
  './amenities']. 
  includes( 
  arr)) { 
 
 
  if ( 
  arr) { 
 
 
  window. 
  location. 
  href = 
  ` 
  ${ 
  data. 
  _metadata. 
  root_url 
  } 
  / 
  ${ 
  arr 
  } 
  `; 
 

   } 
  else { 
 
 
  window. 
  location. 
  href = 
  ` 
  ${ 
  data. 
  _metadata. 
  root_url 
  } 
  /aboutus`; 
 

   } 
 

   } 
  else{ 
 
 
  var 
  _this = 
  $( 
  this) 
 
 
  $( 
  'body'). 
  append( 
  str); 
 
 
  $( 
  '.login-int'). 
  on( 
  'keypress', 
  function( 
  e) { 
 
 
  if ( 
  e. 
  which == 
  13) { 
 
 
  handleFormEnter(); 
 

   } 
 

   }); 
 

 
  $( 
  '.login-int-a'). 
  on( 
  'keypress', 
  function( 
  e) { 
 
 
  if ( 
  e. 
  which == 
  13) { 
 
 
  handleFormEnter(); 
 

   } 
 

   }); 
 
 
  $( 
  '.login-button'). 
  click( 
  function() { 
 
 
  if (!! 
  $( 
  '.login-int'). 
  val() && !! 
  $( 
  '.login-int-a'). 
  val()) { 
 
 
  //TODO log in user 
 
 
  var 
  email = 
  $( 
  '.login-int'). 
  val(); 
 
 
  var 
  password = 
  $( 
  '.login-int-a'). 
  val(); 
 

 
  logInUser( 
  email, 
  password) 
 

   } 
  else { 
 
 
  handleLogin() 
 

   } 
 


   }) 
 
 
  $( 
  '.return'). 
  click( 
  function() { 
 
 
  $( 
  '.db'). 
  remove(); 
 

   }) 
 

   } 
 

   }) 
 

 
  if ( 
  username) { 
 
 
  $( 
  ".btns-language"). 
  click( 
  function( 
  event) { 
 
 
  event. 
  preventDefault(); 
 

   }) 
 
 
  $( 
  ".langOv"). 
  css( 
  "display", 
  "block") 
 

   } 
  else { 
 
 
  $( 
  ".btns-language"). 
  click( 
  function() { 
 
 
  $( 
  'body'). 
  append( 
  str); 
 
 
  $( 
  '.login-int'). 
  on( 
  'keypress', 
  function( 
  e) { 
 
 
  if ( 
  e. 
  which == 
  13) { 
 
 
  handleFormEnter(); 
 

   } 
 

   }); 
 

 
  $( 
  '.login-int-a'). 
  on( 
  'keypress', 
  function( 
  e) { 
 
 
  if ( 
  e. 
  which == 
  13) { 
 
 
  handleFormEnter(); 
 

   } 
 

   }); 
 
 
  var 
  _this = 
  $( 
  this); 
 
 
  $( 
  '.login-button'). 
  click( 
  function() { 
 
 
  if ( 
  data. 
  _metadata. 
  environment === 
  'dev') { 
 
 
  if (!! 
  $( 
  '.login-int'). 
  val() && !! 
  $( 
  '.login-int-a'). 
  val()) { 
 
 
  // TODO: log in user 
 
 
  var 
  email = 
  $( 
  '.login-int'). 
  val(); 
 
 
  var 
  password = 
  $( 
  '.login-int-a'). 
  val(); 
 
 
  logInUser( 
  email, 
  password); 
 

   } 
  else { 
 
 
  handleLogin() 
 

   } 
 

   } 
  else { 
 
 
  handleRemoteLogin() 
 

   } 
 

   }) 
 
 
  $( 
  '.return'). 
  click( 
  function() { 
 
 
  $( 
  '.db'). 
  remove(); 
 

   }) 
 

   }) 
 

   } 
 

   }; 
 