init Webapp

webapp/css/popuo-box.css

+/* Styles for dialog window */
+#small-dialog,#small-dialog2,#small-dialog3,#small-dialog4{
+	background: #FFF;
+	padding:20px;
+	text-align: left;
+	max-width: 700px;
+	margin: 40px auto;
+	position: relative;
+	text-align:center;
+}
+#small-dialog-it,#small-dialog-in,#small-dialog-fr,#small-dialog-sh,#small-dialog-sf,#small-dialog-su,#small-dialog-me,#small-dialog-ch,#small-dialog-pi,#small-dialog-am {
+	background: white;
+	padding:20px;
+	text-align: left;
+	max-width: 450px;
+	margin: 40px auto;
+	position: relative;
+	text-align:center;
+}
+.signup h4 {
+	color: #000;
+}
+.portfolio-items{
+	text-align:center;
+	margin:0 auto;
+}
+.portfolio-items img{
+	width:100%;
+}
+.portfolio-items h4{
+	margin:1em 0;
+	font-size:25px;
+	color:#a63d56;
+}
+.portfolio-items p{
+	text-align:justify;
+}
+/**
+
+/**
+ * Fade-zoom animation for first dialog
+ */
+
+/* start state */
+.my-mfp-zoom-in #small-dialog {
+opacity: 0;
+-webkit-transition: all 0.2s ease-in-out;
+-moz-transition: all 0.2s ease-in-out;
+-o-transition: all 0.2s ease-in-out;
+transition: all 0.2s ease-in-out;
+-webkit-transform: scale(0.8);
+-moz-transform: scale(0.8);
+-ms-transform: scale(0.8);
+-o-transform: scale(0.8);
+transform: scale(0.8);
+}
+/* animate in */
+.my-mfp-zoom-in.mfp-ready #small-dialog {
+opacity: 1;
+-webkit-transform: scale(1);
+-moz-transform: scale(1);
+-ms-transform: scale(1);
+-o-transform: scale(1);
+transform: scale(1);
+}
+/* animate out */
+.my-mfp-zoom-in.mfp-removing #small-dialog {
+-webkit-transform: scale(0.8);
+-moz-transform: scale(0.8);
+-ms-transform: scale(0.8);
+-o-transform: scale(0.8);
+transform: scale(0.8);
+opacity: 0;
+}
+/* Dark overlay, start state */
+.my-mfp-zoom-in.mfp-bg {
+opacity: 0;
+-webkit-transition: opacity 0.3s ease-out;
+-moz-transition: opacity 0.3s ease-out;
+-o-transition: opacity 0.3s ease-out;
+transition: opacity 0.3s ease-out;
+}
+/* animate in */
+.my-mfp-zoom-in.mfp-ready.mfp-bg {
+opacity: 0.8;
+}
+/* animate out */
+.my-mfp-zoom-in.mfp-removing.mfp-bg {
+opacity: 0;
+}
+/**
+/* Magnific Popup CSS */
+.mfp-bg {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1042;
+  overflow: hidden;
+  position: fixed;
+  background: #0b0b0b;
+  opacity: 0.8;
+  filter: alpha(opacity=80); }
+
+.mfp-wrap {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1043;
+  position: fixed;
+  outline: none !important;
+  -webkit-backface-visibility: hidden; }
+
+.mfp-container {
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  padding: 0 8px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+
+.mfp-container:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle; }
+
+.mfp-align-top .mfp-container:before {
+  display: none; }
+
+.mfp-content {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 auto;
+  text-align: left;
+  z-index: 1045; }
+
+.mfp-inline-holder .mfp-content,
+.mfp-ajax-holder .mfp-content {
+  width: 100%;
+  cursor: auto; }
+
+.mfp-ajax-cur {
+  cursor: progress; }
+
+.mfp-zoom-out-cur,
+.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+  cursor: -moz-zoom-out;
+  cursor: -webkit-zoom-out;
+  cursor: zoom-out; }
+.mfp-zoom {
+  cursor: pointer;
+  cursor: -webkit-zoom-in;
+  cursor: -moz-zoom-in;
+  cursor: zoom-in; }
+
+.mfp-auto-cursor .mfp-content {
+  cursor: auto; }
+
+.mfp-close,
+.mfp-arrow,
+.mfp-preloader,
+.mfp-counter {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none; }
+
+.mfp-loading.mfp-figure {
+  display: none; }
+
+.mfp-hide {
+  display: none !important; }
+.mfp-content iframe{
+	width:100%;
+	min-height:500px;
+}
+.mfp-preloader {
+  color: #cccccc;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  text-align: center;
+  margin-top: -0.8em;
+  left: 8px;
+  right: 8px;
+  z-index: 1044; }
+
+.mfp-preloader a {
+  color: #cccccc; }
+
+.mfp-preloader a:hover {
+  color: white; }
+
+.mfp-s-ready .mfp-preloader {
+  display: none; }
+
+.mfp-s-error .mfp-content {
+  display: none; }
+
+button.mfp-close,
+button.mfp-arrow {
+  overflow: visible;
+  cursor: pointer;
+  border: 0;
+   background:#FFF;
+  -webkit-appearance: none;
+  display: block;
+  padding: 0;
+  z-index: 1046; }
+button::-moz-focus-inner {
+  padding: 0;
+  border: 0; }
+
+.mfp-close {
+  width: 44px;
+  height: 44px;
+  line-height: 44px;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  text-decoration: none;
+  text-align: center;
+  padding: 0 0 18px 10px;
+  color: white;
+  font-style: normal;
+  font-size: 28px;
+  outline:none;
+  font-family: 'Open Sans', sans-serif;		
+ }
+  .mfp-close:hover, .mfp-close:focus {
+    opacity: 1; }
+
+.mfp-close-btn-in .mfp-close {
+  color: #333333; 
+ background: #FFF;
+  }
+
+.mfp-image-holder .mfp-close,
+.mfp-iframe-holder .mfp-close {
+  color: white;
+  right: -6px;
+  text-align: right;
+  padding-right: 6px;
+  width: 100%; 
+}
+.login h3,.signup h3{
+	margin:1em 0;
+	color: #000000;
+	font-weight: 700;
+}
+.login p{	
+	color:##000000;
+	font-size:14px;
+	text-align:center;
+}
+.login input[type="text"],.login input[type="password"]{
+	width: 90%;
+	border: none;
+	padding: 12px;
+	margin: 3px 0;
+	color: #9F9F9F;
+	font-size: 14px;
+	border: solid 1px #9F9F9F;
+	border-radius: 7px;
+	-webkit-border-radius: 7px;
+	-moz-border-radius: 7px;
+	-o-border-radius: 7px;
+	-ms-border-radius: 7px;
+	font-family: 'Open Sans', sans-serif;
+	outline: none !important;
+	-webkit-appearance: none;
+}
+.signup input[type="text"]{
+	width: 44.5%;
+	padding: 10px;
+	margin: 10px 0;
+	outline: none;
+	color: #817F7F;
+	border: solid 1px #9F9F9F;
+	border-radius: 7px;
+	-webkit-border-radius: 7px;
+	-moz-border-radius: 7px;
+	-o-border-radius: 7px;
+	-ms-border-radius: 7px;
+	-webkit-appearance: none;
+}
+.signup input.password[type="text"] {
+	width: 90%;
+}
+.signup input.email[type="text"],.signup input[type="password"]{
+	width: 90%;
+	padding: 10px;
+	margin: 10px 0;
+	outline: none;
+	color: #817F7F;
+	border: solid 1px #9F9F9F;
+	border-radius: 7px;
+	-webkit-border-radius: 7px;
+	-moz-border-radius: 7px;
+	-o-border-radius: 7px;
+	-ms-border-radius: 7px;
+	-webkit-appearance: none;
+}
+.login input[type="submit"],.signup input[type="submit"]{
+	border: 0px;
+	padding: 8px;
+	margin: 10px 10px;
+	width: 90%;
+	outline: none;
+	font-size: 16px;
+	color: #9F9F9F;
+	font-weight: 700;
+	text-transform: uppercase;
+	font-family: 'Open Sans', sans-serif;
+	border: solid 1px #9F9F9F;
+	border-radius: 7px;
+	-webkit-border-radius: 7px;
+	-moz-border-radius: 7px;
+	-o-border-radius: 7px;
+	-ms-border-radius: 7px;
+	-webkit-appearance: none;
+}
+.login input[type="submit"]:hover,.signup input[type="submit"]:hover{
+	-webkit-transition: all 0.5s ease-in-out;
+	-moz-transition: all 0.5s ease-in-out;
+	-o-transition: all 0.5s ease-in-out;
+	transition: all 0.5s ease-in-out;
+	border: solid 1px #3EB5F1;
+	color: #3EB5F1;
+}
+@media all and (max-width:480px){
+	.comments-area textarea{
+		height:100px;
+	}
+	.login input[type="submit"], .signup input[type="submit"] {
+	}
+}
+@media all and (max-width:320px){
+	.comments-area span.label,.comments-area span.text-field{
+		float:none;
+		width:100%;
+	}
+	.comments-area span{
+		padding-bottom:3px;
+	}
+	#small-dialog{
+		padding:15px;
+	}
+	.comments-area input[type="text"], .comments-area textarea{
+		width:92%;
+	}
+	.comments-area div{
+		padding:2px 0;
+	}
+	.mfp-content iframe{
+		width:100%;
+		min-height:250px;
+	}
+	.login input[type="submit"], .signup input[type="submit"] {
+		font-size: 12px;
+	}
+	.signup input[type="text"] {
+		width: 90%;
+	}
+} 

webapp/js/jquery.flexisel.js

+/*
+* File: jquery.flexisel.js
+* Version: 1.0.0
+* Description: Responsive carousel jQuery plugin
+* Author: 9bit Studios
+* Copyright 2012, 9bit Studios
+* http://www.9bitstudios.com
+* Free to use and abuse under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+*/
+
+(function ($) {
+
+    $.fn.flexisel = function (options) {
+
+        var defaults = $.extend({
+    		visibleItems: 4,
+    		animationSpeed: 200,
+    		autoPlay: false,
+    		autoPlaySpeed: 3000,    		
+    		pauseOnHover: true,
+			setMaxWidthAndHeight: false,
+    		enableResponsiveBreakpoints: false,
+    		responsiveBreakpoints: { 
+	    		portrait: { 
+	    			changePoint:480,
+	    			visibleItems: 1
+	    		}, 
+	    		landscape: { 
+	    			changePoint:640,
+	    			visibleItems: 2
+	    		},
+	    		tablet: { 
+	    			changePoint:768,
+	    			visibleItems: 3
+	    		}
+        	}
+        }, options);
+        
+		/******************************
+		Private Variables
+		*******************************/         
+        
+        var object = $(this);
+		var settings = $.extend(defaults, options);        
+		var itemsWidth; // Declare the global width of each item in carousel
+		var canNavigate = true; 
+        var itemsVisible = settings.visibleItems; 
+        
+		/******************************
+		Public Methods
+		*******************************/        
+        
+        var methods = {
+        		
+			init: function() {
+				
+        		return this.each(function () {
+        			methods.appendHTML();
+        			methods.setEventHandlers();      			
+        			methods.initializeItems();
+				});
+			},
+
+			/******************************
+			Initialize Items
+			*******************************/			
+			
+			initializeItems: function() {
+				
+				var listParent = object.parent();
+				var innerHeight = listParent.height(); 
+				var childSet = object.children();
+				
+    			var innerWidth = listParent.width(); // Set widths
+    			itemsWidth = (innerWidth)/itemsVisible;
+    			childSet.width(itemsWidth);
+    			childSet.last().insertBefore(childSet.first());
+    			childSet.last().insertBefore(childSet.first());
+    			object.css({'left' : -itemsWidth}); 
+
+    			object.fadeIn();
+				$(window).trigger("resize"); // needed to position arrows correctly
+
+			},
+			
+			
+			/******************************
+			Append HTML
+			*******************************/			
+			
+			appendHTML: function() {
+				
+   			 	object.addClass("nbs-flexisel-ul");
+   			 	object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>");
+   			 	object.find("li").addClass("nbs-flexisel-item");
+ 
+   			 	if(settings.setMaxWidthAndHeight) {
+	   			 	var baseWidth = $(".nbs-flexisel-item > img").width();
+	   			 	var baseHeight = $(".nbs-flexisel-item > img").height();
+	   			 	$(".nbs-flexisel-item > img").css("max-width", baseWidth);
+	   			 	$(".nbs-flexisel-item > img").css("max-height", baseHeight);
+   			 	}
+ 
+   			 	$("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(object);
+   			 	var cloneContent = object.children().clone();
+   			 	object.append(cloneContent);
+			},
+					
+			
+			/******************************
+			Set Event Handlers
+			*******************************/
+			setEventHandlers: function() {
+				
+				var listParent = object.parent();
+				var childSet = object.children();
+				var leftArrow = listParent.find($(".nbs-flexisel-nav-left"));
+				var rightArrow = listParent.find($(".nbs-flexisel-nav-right"));
+				
+				$(window).on("resize", function(event){
+					
+					methods.setResponsiveEvents();
+					
+					var innerWidth = $(listParent).width();
+					var innerHeight = $(listParent).height(); 
+					
+					itemsWidth = (innerWidth)/itemsVisible;
+					
+					childSet.width(itemsWidth);
+					object.css({'left' : -itemsWidth});
+					
+					var halfArrowHeight = (leftArrow.height())/2;
+					var arrowMargin = (innerHeight/2) - halfArrowHeight;
+					leftArrow.css("top", arrowMargin + "px");
+					rightArrow.css("top", arrowMargin + "px");
+					
+				});					
+				
+				$(leftArrow).on("click", function (event) {
+					methods.scrollLeft();
+				});
+				
+				$(rightArrow).on("click", function (event) {
+					methods.scrollRight();
+				});
+				
+				if(settings.pauseOnHover == true) {
+					$(".nbs-flexisel-item").on({
+						mouseenter: function () {
+							canNavigate = false;
+						}, 
+						mouseleave: function () {
+							canNavigate = true;
+						}
+					 });
+				}
+
+				if(settings.autoPlay == true) {
+					
+					setInterval(function () {
+						if(canNavigate == true)
+							methods.scrollRight();
+					}, settings.autoPlaySpeed);
+				}
+				
+			},
+			
+			/******************************
+			Set Responsive Events
+			*******************************/			
+			
+			setResponsiveEvents: function() {
+				var contentWidth = $('html').width();
+				
+				if(settings.enableResponsiveBreakpoints == true) {
+					if(contentWidth < settings.responsiveBreakpoints.portrait.changePoint) {
+						itemsVisible = settings.responsiveBreakpoints.portrait.visibleItems;
+					}
+					else if(contentWidth > settings.responsiveBreakpoints.portrait.changePoint && contentWidth < settings.responsiveBreakpoints.landscape.changePoint) {
+						itemsVisible = settings.responsiveBreakpoints.landscape.visibleItems;
+					}
+					else if(contentWidth > settings.responsiveBreakpoints.landscape.changePoint && contentWidth < settings.responsiveBreakpoints.tablet.changePoint) {
+						itemsVisible = settings.responsiveBreakpoints.tablet.visibleItems;
+					}
+					else {
+						itemsVisible = settings.visibleItems;
+					}
+				}
+			},			
+			
+			/******************************
+			Scroll Left
+			*******************************/				
+			
+			scrollLeft:function() {
+
+				if(canNavigate == true) {
+					canNavigate = false;
+					
+					var listParent = object.parent();
+					var innerWidth = listParent.width();
+					
+					itemsWidth = (innerWidth)/itemsVisible;
+					
+					var childSet = object.children();
+					
+					object.animate({
+							'left' : "+=" + itemsWidth
+						},
+						{
+							queue:false, 
+							duration:settings.animationSpeed,
+							easing: "linear",
+							complete: function() {  
+								childSet.last().insertBefore(childSet.first()); // Get the first list item and put it after the last list item (that's how the infinite effects is made)   								
+								methods.adjustScroll();
+								canNavigate = true; 
+							}
+						}
+					);
+				}
+			},
+			
+			/******************************
+			Scroll Right
+			*******************************/				
+			
+			scrollRight:function() {
+				
+				if(canNavigate == true) {
+					canNavigate = false;
+					
+					var listParent = object.parent();
+					var innerWidth = listParent.width();
+					
+					itemsWidth = (innerWidth)/itemsVisible;
+					
+					var childSet = object.children();
+					
+					object.animate({
+							'left' : "-=" + itemsWidth
+						},
+						{
+							queue:false, 
+							duration:settings.animationSpeed,
+							easing: "linear",
+							complete: function() {  
+								childSet.first().insertAfter(childSet.last()); // Get the first list item and put it after the last list item (that's how the infinite effects is made)   
+								methods.adjustScroll();
+								canNavigate = true; 
+							}
+						}
+					);
+				}
+			},
+			
+			/******************************
+			Adjust Scroll 
+			*******************************/
+			
+			adjustScroll: function() {
+				
+				var listParent = object.parent();
+				var childSet = object.children();				
+				
+				var innerWidth = listParent.width(); 
+				itemsWidth = (innerWidth)/itemsVisible;
+				childSet.width(itemsWidth);
+				object.css({'left' : -itemsWidth});		
+			}			
+        
+        };
+        
+        if (methods[options]) { 	// $("#element").pluginName('methodName', 'arg1', 'arg2');
+            return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
+        } else if (typeof options === 'object' || !options) { 	// $("#element").pluginName({ option: 1, option:2 });
+            return methods.init.apply(this);  
+        } else {
+            $.error( 'Method "' +  method + '" does not exist in flexisel plugin!');
+        }        
+};
+
+})(jQuery);

webapp/js/responsiveslides.min.js

+/*! http://responsiveslides.com v1.54 by @viljamis */
+(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on",
+w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zIndex:2},y={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before(b);F?(e.removeClass(j).css(y).eq(b).addClass(j).css(x),
+n=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(j).css(y).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(j).css(x);a.after(b);n=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addClass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addClass(j).css(x).show();F&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
+h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(D<h+100)return;if(a.pager&&!a.manualControls){var A=[];e.each(function(a){a+=1;A+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&k.find("li").each(function(a){c(this).addClass(w+(a+1))});if(a.pager||a.manualControls)q=
+k.find("a"),r=function(a){q.closest("li").removeClass(v).eq(a).addClass(v)};a.auto&&(t=function(){p=setInterval(function(){e.stop(!0,!0);var b=n+1<C?n+1:0;(a.pager||a.manualControls)&&r(b);z(b)},D)},t());m=function(){a.auto&&(clearInterval(p),t())};a.pause&&f.hover(function(){clearInterval(p)},function(){m()});if(a.pager||a.manualControls)q.bind("click",function(b){b.preventDefault();a.pauseControls||m();b=q.index(this);n===b||c("."+j).queue("fx").length||(r(b),z(b))}).eq(0).closest("li").addClass(v),
+a.pauseControls&&q.hover(function(){clearInterval(p)},function(){m()});if(a.nav){g="<a href='#' class='"+E+" prev'>"+a.prevText+"</a><a href='#' class='"+E+" next'>"+a.nextText+"</a>";l.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),G=d.filter(".prev");d.bind("click",function(b){b.preventDefault();b=c("."+j);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<C?n+1:0;z(c(this)[0]===G[0]?b:d);if(a.pager||a.manualControls)r(c(this)[0]===G[0]?b:d);a.pauseControls||m()}});
+a.pauseControls&&d.hover(function(){clearInterval(p)},function(){m()})}}if("undefined"===typeof document.body.style.maxWidth&&l.maxwidth){var H=function(){f.css("width","100%");f.width()>u&&f.css("width",u)};H();c(I).bind("resize",function(){H()})}})}})(jQuery,this,0);