add login ui
This commit is contained in:
Amir Hamzan
Binary file not shown.
|
After Width: | Height: | Size: 898 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+264
@@ -0,0 +1,264 @@
|
|||||||
|
/*!
|
||||||
|
|
||||||
|
=========================================================
|
||||||
|
* Material Kit 2 - v3.0.0
|
||||||
|
=========================================================
|
||||||
|
|
||||||
|
* Product Page: https://www.creative-tim.com/product/soft-ui-design-system
|
||||||
|
* Copyright 2021 Creative Tim (https://www.creative-tim.com)
|
||||||
|
|
||||||
|
* Coded by Creative Tim
|
||||||
|
|
||||||
|
=========================================================
|
||||||
|
|
||||||
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
// initialization of Popovers
|
||||||
|
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
||||||
|
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
|
||||||
|
return new bootstrap.Popover(popoverTriggerEl)
|
||||||
|
})
|
||||||
|
|
||||||
|
// initialization of Tooltips
|
||||||
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||||
|
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
|
||||||
|
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||||
|
})
|
||||||
|
|
||||||
|
// helper for adding on all elements multiple attributes
|
||||||
|
function setAttributes(el, options) {
|
||||||
|
Object.keys(options).forEach(function(attr) {
|
||||||
|
el.setAttribute(attr, options[attr]);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// activate popovers
|
||||||
|
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
|
||||||
|
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
|
||||||
|
return new bootstrap.Popover(popoverTriggerEl)
|
||||||
|
})
|
||||||
|
|
||||||
|
// activate tooltips
|
||||||
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
|
||||||
|
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
|
||||||
|
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Tabs navigation
|
||||||
|
|
||||||
|
var total = document.querySelectorAll('.nav-pills');
|
||||||
|
|
||||||
|
total.forEach(function(item, i) {
|
||||||
|
var moving_div = document.createElement('div');
|
||||||
|
var first_li = item.querySelector('li:first-child .nav-link');
|
||||||
|
var tab = first_li.cloneNode();
|
||||||
|
tab.innerHTML = "-";
|
||||||
|
|
||||||
|
moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link');
|
||||||
|
moving_div.appendChild(tab);
|
||||||
|
item.appendChild(moving_div);
|
||||||
|
|
||||||
|
var list_length = item.getElementsByTagName("li").length;
|
||||||
|
|
||||||
|
moving_div.style.padding = '0px';
|
||||||
|
moving_div.style.width = item.querySelector('li:nth-child(1)').offsetWidth + 'px';
|
||||||
|
moving_div.style.transform = 'translate3d(0px, 0px, 0px)';
|
||||||
|
moving_div.style.transition = '.5s ease';
|
||||||
|
|
||||||
|
item.onmouseover = function(event) {
|
||||||
|
let target = getEventTarget(event);
|
||||||
|
let li = target.closest('li'); // get reference
|
||||||
|
if (li) {
|
||||||
|
let nodes = Array.from(li.closest('ul').children); // get array
|
||||||
|
let index = nodes.indexOf(li) + 1;
|
||||||
|
item.querySelector('li:nth-child(' + index + ') .nav-link').onclick = function() {
|
||||||
|
moving_div = item.querySelector('.moving-tab');
|
||||||
|
let sum = 0;
|
||||||
|
if (item.classList.contains('flex-column')) {
|
||||||
|
for (var j = 1; j <= nodes.indexOf(li); j++) {
|
||||||
|
sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight;
|
||||||
|
}
|
||||||
|
moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)';
|
||||||
|
moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight;
|
||||||
|
} else {
|
||||||
|
for (var j = 1; j <= nodes.indexOf(li); j++) {
|
||||||
|
sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth;
|
||||||
|
}
|
||||||
|
moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)';
|
||||||
|
moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Tabs navigation resize
|
||||||
|
|
||||||
|
window.addEventListener('resize', function(event) {
|
||||||
|
total.forEach(function(item, i) {
|
||||||
|
item.querySelector('.moving-tab').remove();
|
||||||
|
var moving_div = document.createElement('div');
|
||||||
|
var tab = item.querySelector(".nav-link.active").cloneNode();
|
||||||
|
tab.innerHTML = "-";
|
||||||
|
|
||||||
|
moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link');
|
||||||
|
moving_div.appendChild(tab);
|
||||||
|
|
||||||
|
item.appendChild(moving_div);
|
||||||
|
|
||||||
|
moving_div.style.padding = '0px';
|
||||||
|
moving_div.style.transition = '.5s ease';
|
||||||
|
|
||||||
|
let li = item.querySelector(".nav-link.active").parentElement;
|
||||||
|
|
||||||
|
if (li) {
|
||||||
|
let nodes = Array.from(li.closest('ul').children); // get array
|
||||||
|
let index = nodes.indexOf(li) + 1;
|
||||||
|
|
||||||
|
let sum = 0;
|
||||||
|
if (item.classList.contains('flex-column')) {
|
||||||
|
for (var j = 1; j <= nodes.indexOf(li); j++) {
|
||||||
|
sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight;
|
||||||
|
}
|
||||||
|
moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)';
|
||||||
|
moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
|
||||||
|
moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight;
|
||||||
|
} else {
|
||||||
|
for (var j = 1; j <= nodes.indexOf(li); j++) {
|
||||||
|
sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth;
|
||||||
|
}
|
||||||
|
moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)';
|
||||||
|
moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (window.innerWidth < 991) {
|
||||||
|
total.forEach(function(item, i) {
|
||||||
|
if (!item.classList.contains('flex-column')) {
|
||||||
|
item.classList.add('flex-column', 'on-resize');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
total.forEach(function(item, i) {
|
||||||
|
if (item.classList.contains('on-resize')) {
|
||||||
|
item.classList.remove('flex-column', 'on-resize');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function getEventTarget(e) {
|
||||||
|
e = e || window.event;
|
||||||
|
return e.target || e.srcElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
// End tabs navigation
|
||||||
|
|
||||||
|
// Copy code function
|
||||||
|
|
||||||
|
function copyCode(el) {
|
||||||
|
const selection = window.getSelection();
|
||||||
|
const range = document.createRange();
|
||||||
|
const textToCopy = el.nextElementSibling;
|
||||||
|
range.selectNodeContents(textToCopy);
|
||||||
|
selection.removeAllRanges();
|
||||||
|
selection.addRange(range);
|
||||||
|
const successful = document.execCommand('copy');
|
||||||
|
window.getSelection().removeAllRanges()
|
||||||
|
if (!el.parentElement.querySelector('.alert')) {
|
||||||
|
var alert = document.createElement('div');
|
||||||
|
alert.classList.add('alert', 'alert-success', 'position-absolute', 'top-0', 'border-0', 'text-white', 'w-25', 'end-0', 'start-0', 'mt-2', 'mx-auto', 'py-2');
|
||||||
|
alert.style.transform = 'translate3d(0px, 0px, 0px)'
|
||||||
|
alert.style.opacity = '0';
|
||||||
|
alert.style.transition = '.35s ease';
|
||||||
|
setTimeout(function() {
|
||||||
|
alert.style.transform = 'translate3d(0px, 20px, 0px)';
|
||||||
|
alert.style.setProperty("opacity", "1", "important");
|
||||||
|
}, 100);
|
||||||
|
alert.innerHTML = "Code successfully copied!";
|
||||||
|
el.parentElement.appendChild(alert);
|
||||||
|
setTimeout(function() {
|
||||||
|
alert.style.transform = 'translate3d(0px, 0px, 0px)'
|
||||||
|
alert.style.setProperty("opacity", "0", "important");
|
||||||
|
}, 2000);
|
||||||
|
setTimeout(function() {
|
||||||
|
el.parentElement.querySelector('.alert').remove();
|
||||||
|
}, 2500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// End copy code function
|
||||||
|
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
// Material Design Input function
|
||||||
|
var inputs = document.querySelectorAll('input');
|
||||||
|
|
||||||
|
for (var i = 0; i < inputs.length; i++) {
|
||||||
|
inputs[i].addEventListener('focus', function(e) {
|
||||||
|
this.parentElement.classList.add('is-focused');
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
inputs[i].onkeyup = function(e) {
|
||||||
|
if (this.value != "") {
|
||||||
|
this.parentElement.classList.add('is-filled');
|
||||||
|
} else {
|
||||||
|
this.parentElement.classList.remove('is-filled');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
inputs[i].addEventListener('focusout', function(e) {
|
||||||
|
if (this.value != "") {
|
||||||
|
this.parentElement.classList.add('is-filled');
|
||||||
|
}
|
||||||
|
this.parentElement.classList.remove('is-focused');
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ripple Effect
|
||||||
|
var ripples = document.querySelectorAll('.btn');
|
||||||
|
|
||||||
|
for (var i = 0; i < ripples.length; i++) {
|
||||||
|
ripples[i].addEventListener('click', function(e) {
|
||||||
|
var targetEl = e.target;
|
||||||
|
var rippleDiv = targetEl.querySelector('.ripple');
|
||||||
|
|
||||||
|
rippleDiv = document.createElement('span');
|
||||||
|
rippleDiv.classList.add('ripple');
|
||||||
|
rippleDiv.style.width = rippleDiv.style.height = Math.max(targetEl.offsetWidth, targetEl.offsetHeight) + 'px';
|
||||||
|
targetEl.appendChild(rippleDiv);
|
||||||
|
|
||||||
|
rippleDiv.style.left = (e.offsetX - rippleDiv.offsetWidth / 2) + 'px';
|
||||||
|
rippleDiv.style.top = (e.offsetY - rippleDiv.offsetHeight / 2) + 'px';
|
||||||
|
rippleDiv.classList.add('ripple');
|
||||||
|
setTimeout(function() {
|
||||||
|
rippleDiv.parentElement.removeChild(rippleDiv);
|
||||||
|
}, 600);
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Returns a function, that, as long as it continues to be invoked, will not
|
||||||
|
// be triggered. The function will be called after it stops being called for
|
||||||
|
// N milliseconds. If `immediate` is passed, trigger the function on the
|
||||||
|
// leading edge, instead of the trailing.
|
||||||
|
|
||||||
|
function debounce(func, wait, immediate) {
|
||||||
|
var timeout;
|
||||||
|
return function() {
|
||||||
|
var context = this,
|
||||||
|
args = arguments;
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = setTimeout(function() {
|
||||||
|
timeout = null;
|
||||||
|
if (!immediate) func.apply(context, args);
|
||||||
|
}, wait);
|
||||||
|
if (immediate && !timeout) func.apply(context, args);
|
||||||
|
};
|
||||||
|
};
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
|||||||
|
var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var i,a=1,s=arguments.length;a<s;a++)for(var n in i=arguments[a])Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,a){var s=this;this.target=t,this.endVal=i,this.options=a,this.version="2.0.7",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:""},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){s.startTime||(s.startTime=t);var i=t-s.startTime;s.remaining=s.duration-i,s.useEasing?s.countDown?s.frameVal=s.startVal-s.easingFn(i,0,s.startVal-s.endVal,s.duration):s.frameVal=s.easingFn(i,s.startVal,s.endVal-s.startVal,s.duration):s.countDown?s.frameVal=s.startVal-(s.startVal-s.endVal)*(i/s.duration):s.frameVal=s.startVal+(s.endVal-s.startVal)*(i/s.duration),s.countDown?s.frameVal=s.frameVal<s.endVal?s.endVal:s.frameVal:s.frameVal=s.frameVal>s.endVal?s.endVal:s.frameVal,s.frameVal=Number(s.frameVal.toFixed(s.options.decimalPlaces)),s.printValue(s.frameVal),i<s.duration?s.rAF=requestAnimationFrame(s.count):null!==s.finalEndVal?s.update(s.finalEndVal):s.callback&&s.callback()},this.formatNumber=function(t){var i,a,n,e,r,o=t<0?"-":"";if(i=Math.abs(t).toFixed(s.options.decimalPlaces),n=(a=(i+="").split("."))[0],e=a.length>1?s.options.decimal+a[1]:"",s.options.useGrouping){r="";for(var l=0,h=n.length;l<h;++l)0!==l&&l%3==0&&(r=s.options.separator+r),r=n[h-l-1]+r;n=r}return s.options.numerals&&s.options.numerals.length&&(n=n.replace(/[0-9]/g,function(t){return s.options.numerals[+t]}),e=e.replace(/[0-9]/g,function(t){return s.options.numerals[+t]})),o+s.options.prefix+n+e+s.options.suffix},this.easeOutExpo=function(t,i,a,s){return a*(1-Math.pow(2,-10*t/s))*1024/1023+i},this.options=__assign(__assign({},this.defaults),a),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(i),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,""===this.options.separator&&(this.options.useGrouping=!1),this.el="string"==typeof t?document.getElementById(t):t,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined"}return t.prototype.determineDirectionAndSmartEasing=function(){var t=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>t;var i=t-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold){this.finalEndVal=t;var a=this.countDown?1:-1;this.endVal=t+a*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=t,this.finalEndVal=null;this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},t.prototype.start=function(t){this.error||(this.callback=t,this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},t.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},t.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},t.prototype.update=function(t){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(t),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal||this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},t.prototype.printValue=function(t){var i=this.formattingFn(t);"INPUT"===this.el.tagName?this.el.value=i:"text"===this.el.tagName||"tspan"===this.el.tagName?this.el.textContent=i:this.el.innerHTML=i},t.prototype.ensureNumber=function(t){return"number"==typeof t&&!isNaN(t)},t.prototype.validateValue=function(t){var i=Number(t);return this.ensureNumber(i)?i:(this.error="[CountUp] invalid start or end value: "+t,null)},t.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},t}();
|
||||||
File diff suppressed because one or more lines are too long
+1358
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,54 @@
|
|||||||
|
var windowHeight = window.innerHeight;
|
||||||
|
|
||||||
|
document.addEventListener('resize', function() {
|
||||||
|
windowHeight = window.innerHeight;
|
||||||
|
})
|
||||||
|
|
||||||
|
function outerHeight(el) {
|
||||||
|
var height = el.offsetHeight;
|
||||||
|
var style = getComputedStyle(el);
|
||||||
|
|
||||||
|
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
|
||||||
|
return height;
|
||||||
|
}
|
||||||
|
|
||||||
|
function parallax (el, speedFactor, outerHeight) {
|
||||||
|
var foo = document.querySelectorAll(el);
|
||||||
|
|
||||||
|
var getHeight;
|
||||||
|
var firstTop;
|
||||||
|
var paddingTop = 0;
|
||||||
|
|
||||||
|
//get the starting position of each element to have parallax applied to it
|
||||||
|
foo.forEach(function(subEl){
|
||||||
|
firstTop = subEl.getBoundingClientRect().top;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (outerHeight) {
|
||||||
|
getHeight = function(el) {
|
||||||
|
return outerHeight(el);
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
getHeight = function(el) {
|
||||||
|
return el.clientHeight;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// function to be called whenever the window is scrolled or resized
|
||||||
|
function update(){
|
||||||
|
var pos = window.scrollY;
|
||||||
|
|
||||||
|
foo.forEach(function(subEl){
|
||||||
|
var element = subEl;
|
||||||
|
var top = element.getBoundingClientRect().top;
|
||||||
|
var height = getHeight(element);
|
||||||
|
|
||||||
|
element.style.top = -(Math.round((firstTop - pos) * speedFactor)) + "px";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
document.addEventListener('scroll', update, true)
|
||||||
|
document.addEventListener('resize', update)
|
||||||
|
update()
|
||||||
|
};
|
||||||
|
|
||||||
|
parallax(".hero", -0.6);
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,24 @@
|
|||||||
|
// ------------------------------------------
|
||||||
|
// Rellax.js
|
||||||
|
// Buttery smooth parallax library
|
||||||
|
// Copyright (c) 2016 Moe Amaya (@moeamaya)
|
||||||
|
// MIT license
|
||||||
|
//
|
||||||
|
// Thanks to Paraxify.js and Jaime Cabllero
|
||||||
|
// for parallax concepts
|
||||||
|
// ------------------------------------------
|
||||||
|
|
||||||
|
(function(q,g){"function"===typeof define&&define.amd?define([],g):"object"===typeof module&&module.exports?module.exports=g():q.Rellax=g()})("undefined"!==typeof window?window:global,function(){var q=function(g,u){function C(){if(3===a.options.breakpoints.length&&Array.isArray(a.options.breakpoints)){var f=!0,c=!0,b;a.options.breakpoints.forEach(function(a){"number"!==typeof a&&(c=!1);null!==b&&a<b&&(f=!1);b=a});if(f&&c)return}a.options.breakpoints=[576,768,1201];console.warn("Rellax: You must pass an array of 3 numbers in ascending order to the breakpoints option. Defaults reverted")}
|
||||||
|
var a=Object.create(q.prototype),l=0,v=0,m=0,n=0,d=[],w=!0,A=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(a){return setTimeout(a,1E3/60)},p=null,x=!1;try{var k=Object.defineProperty({},"passive",{get:function(){x=!0}});window.addEventListener("testPassive",null,k);window.removeEventListener("testPassive",null,k)}catch(f){}var D=window.cancelAnimationFrame||window.mozCancelAnimationFrame||
|
||||||
|
clearTimeout,E=window.transformProp||function(){var a=document.createElement("div");if(null===a.style.transform){var c=["Webkit","Moz","ms"],b;for(b in c)if(void 0!==a.style[c[b]+"Transform"])return c[b]+"Transform"}return"transform"}();a.options={speed:-2,verticalSpeed:null,horizontalSpeed:null,breakpoints:[576,768,1201],center:!1,wrapper:null,relativeToWrapper:!1,round:!0,vertical:!0,horizontal:!1,verticalScrollAxis:"y",horizontalScrollAxis:"x",callback:function(){}};u&&Object.keys(u).forEach(function(d){a.options[d]=
|
||||||
|
u[d]});u&&u.breakpoints&&C();g||(g=".rellax");k="string"===typeof g?document.querySelectorAll(g):[g];if(0<k.length){a.elems=k;if(a.options.wrapper&&!a.options.wrapper.nodeType)if(k=document.querySelector(a.options.wrapper))a.options.wrapper=k;else{console.warn("Rellax: The wrapper you're trying to use doesn't exist.");return}var F,B=function(){for(var f=0;f<d.length;f++)a.elems[f].style.cssText=d[f].style;d=[];v=window.innerHeight;n=window.innerWidth;f=a.options.breakpoints;F=n<f[0]?"xs":n>=f[0]&&n<
|
||||||
|
f[1]?"sm":n>=f[1]&&n<f[2]?"md":"lg";H();for(f=0;f<a.elems.length;f++){var c=void 0,b=a.elems[f],e=b.getAttribute("data-rellax-percentage"),y=b.getAttribute("data-rellax-speed"),t=b.getAttribute("data-rellax-xs-speed"),g=b.getAttribute("data-rellax-mobile-speed"),h=b.getAttribute("data-rellax-tablet-speed"),k=b.getAttribute("data-rellax-desktop-speed"),l=b.getAttribute("data-rellax-vertical-speed"),m=b.getAttribute("data-rellax-horizontal-speed"),p=b.getAttribute("data-rellax-vertical-scroll-axis"),
|
||||||
|
q=b.getAttribute("data-rellax-horizontal-scroll-axis"),u=b.getAttribute("data-rellax-zindex")||0,x=b.getAttribute("data-rellax-min"),A=b.getAttribute("data-rellax-max"),C=b.getAttribute("data-rellax-min-x"),D=b.getAttribute("data-rellax-max-x"),E=b.getAttribute("data-rellax-min-y"),L=b.getAttribute("data-rellax-max-y"),r=!0;t||g||h||k?c={xs:t,sm:g,md:h,lg:k}:r=!1;t=a.options.wrapper?a.options.wrapper.scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;a.options.relativeToWrapper&&
|
||||||
|
(t=(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop)-a.options.wrapper.offsetTop);var z=a.options.vertical?e||a.options.center?t:0:0,I=a.options.horizontal?e||a.options.center?a.options.wrapper?a.options.wrapper.scrollLeft:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft:0:0;t=z+b.getBoundingClientRect().top;g=b.clientHeight||b.offsetHeight||b.scrollHeight;h=I+b.getBoundingClientRect().left;k=b.clientWidth||b.offsetWidth||b.scrollWidth;
|
||||||
|
z=e?e:(z-t+v)/(g+v);e=e?e:(I-h+n)/(k+n);a.options.center&&(z=e=.5);c=r&&null!==c[F]?Number(c[F]):y?y:a.options.speed;l=l?l:a.options.verticalSpeed;m=m?m:a.options.horizontalSpeed;p=p?p:a.options.verticalScrollAxis;q=q?q:a.options.horizontalScrollAxis;y=J(e,z,c,l,m);b=b.style.cssText;r="";if(e=/transform\s*:/i.exec(b))r=b.slice(e.index),r=(e=r.indexOf(";"))?" "+r.slice(11,e).replace(/\s/g,""):" "+r.slice(11).replace(/\s/g,"");d.push({baseX:y.x,baseY:y.y,top:t,left:h,height:g,width:k,speed:c,verticalSpeed:l,
|
||||||
|
horizontalSpeed:m,verticalScrollAxis:p,horizontalScrollAxis:q,style:b,transform:r,zindex:u,min:x,max:A,minX:C,maxX:D,minY:E,maxY:L})}K();w&&(window.addEventListener("resize",B),w=!1,G())},H=function(){var d=l,c=m;l=a.options.wrapper?a.options.wrapper.scrollTop:(document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset;m=a.options.wrapper?a.options.wrapper.scrollLeft:(document.documentElement||document.body.parentNode||document.body).scrollLeft||window.pageXOffset;
|
||||||
|
a.options.relativeToWrapper&&(l=((document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset)-a.options.wrapper.offsetTop);return d!=l&&a.options.vertical||c!=m&&a.options.horizontal?!0:!1},J=function(d,c,b,e,g){var f={};d=100*(g?g:b)*(1-d);c=100*(e?e:b)*(1-c);f.x=a.options.round?Math.round(d):Math.round(100*d)/100;f.y=a.options.round?Math.round(c):Math.round(100*c)/100;return f},h=function(){window.removeEventListener("resize",h);window.removeEventListener("orientationchange",
|
||||||
|
h);(a.options.wrapper?a.options.wrapper:window).removeEventListener("scroll",h);(a.options.wrapper?a.options.wrapper:document).removeEventListener("touchmove",h);p=A(G)},G=function(){H()&&!1===w?(K(),p=A(G)):(p=null,window.addEventListener("resize",h),window.addEventListener("orientationchange",h),(a.options.wrapper?a.options.wrapper:window).addEventListener("scroll",h,x?{passive:!0}:!1),(a.options.wrapper?a.options.wrapper:document).addEventListener("touchmove",h,x?{passive:!0}:!1))},K=function(){for(var f,
|
||||||
|
c=0;c<a.elems.length;c++){var b=d[c].verticalScrollAxis.toLowerCase(),e=d[c].horizontalScrollAxis.toLowerCase();f=-1!=b.indexOf("x")?l:0;b=-1!=b.indexOf("y")?l:0;var g=-1!=e.indexOf("x")?m:0;e=-1!=e.indexOf("y")?m:0;f=J((f+g-d[c].left+n)/(d[c].width+n),(b+e-d[c].top+v)/(d[c].height+v),d[c].speed,d[c].verticalSpeed,d[c].horizontalSpeed);e=f.y-d[c].baseY;b=f.x-d[c].baseX;null!==d[c].min&&(a.options.vertical&&!a.options.horizontal&&(e=e<=d[c].min?d[c].min:e),a.options.horizontal&&!a.options.vertical&&
|
||||||
|
(b=b<=d[c].min?d[c].min:b));null!=d[c].minY&&(e=e<=d[c].minY?d[c].minY:e);null!=d[c].minX&&(b=b<=d[c].minX?d[c].minX:b);null!==d[c].max&&(a.options.vertical&&!a.options.horizontal&&(e=e>=d[c].max?d[c].max:e),a.options.horizontal&&!a.options.vertical&&(b=b>=d[c].max?d[c].max:b));null!=d[c].maxY&&(e=e>=d[c].maxY?d[c].maxY:e);null!=d[c].maxX&&(b=b>=d[c].maxX?d[c].maxX:b);a.elems[c].style[E]="translate3d("+(a.options.horizontal?b:"0")+"px,"+(a.options.vertical?e:"0")+"px,"+d[c].zindex+"px) "+d[c].transform}a.options.callback(f)};
|
||||||
|
a.destroy=function(){for(var f=0;f<a.elems.length;f++)a.elems[f].style.cssText=d[f].style;w||(window.removeEventListener("resize",B),w=!0);D(p);p=null};B();a.refresh=B;return a}console.warn("Rellax: The elements you're trying to select don't exist.")};return q});
|
||||||
+508
@@ -0,0 +1,508 @@
|
|||||||
|
var VanillaTilt = (function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Created by Sergiu Șandor (micku7zu) on 1/27/2017.
|
||||||
|
* Original idea: https://github.com/gijsroge/tilt.js
|
||||||
|
* MIT License.
|
||||||
|
* Version 1.7.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
class VanillaTilt {
|
||||||
|
constructor(element, settings = {}) {
|
||||||
|
if (!(element instanceof Node)) {
|
||||||
|
throw ("Can't initialize VanillaTilt because " + element + " is not a Node.");
|
||||||
|
}
|
||||||
|
|
||||||
|
this.width = null;
|
||||||
|
this.height = null;
|
||||||
|
this.clientWidth = null;
|
||||||
|
this.clientHeight = null;
|
||||||
|
this.left = null;
|
||||||
|
this.top = null;
|
||||||
|
|
||||||
|
// for Gyroscope sampling
|
||||||
|
this.gammazero = null;
|
||||||
|
this.betazero = null;
|
||||||
|
this.lastgammazero = null;
|
||||||
|
this.lastbetazero = null;
|
||||||
|
|
||||||
|
this.transitionTimeout = null;
|
||||||
|
this.updateCall = null;
|
||||||
|
this.event = null;
|
||||||
|
|
||||||
|
this.updateBind = this.update.bind(this);
|
||||||
|
this.resetBind = this.reset.bind(this);
|
||||||
|
|
||||||
|
this.element = element;
|
||||||
|
this.settings = this.extendSettings(settings);
|
||||||
|
|
||||||
|
this.reverse = this.settings.reverse ? -1 : 1;
|
||||||
|
this.glare = VanillaTilt.isSettingTrue(this.settings.glare);
|
||||||
|
this.glarePrerender = VanillaTilt.isSettingTrue(this.settings["glare-prerender"]);
|
||||||
|
this.fullPageListening = VanillaTilt.isSettingTrue(this.settings["full-page-listening"]);
|
||||||
|
this.gyroscope = VanillaTilt.isSettingTrue(this.settings.gyroscope);
|
||||||
|
this.gyroscopeSamples = this.settings.gyroscopeSamples;
|
||||||
|
|
||||||
|
this.elementListener = this.getElementListener();
|
||||||
|
|
||||||
|
if (this.glare) {
|
||||||
|
this.prepareGlare();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.fullPageListening) {
|
||||||
|
this.updateClientSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.addEventListeners();
|
||||||
|
this.updateInitialPosition();
|
||||||
|
}
|
||||||
|
|
||||||
|
static isSettingTrue(setting) {
|
||||||
|
return setting === "" || setting === true || setting === 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method returns element what will be listen mouse events
|
||||||
|
* @return {Node}
|
||||||
|
*/
|
||||||
|
getElementListener() {
|
||||||
|
if (this.fullPageListening) {
|
||||||
|
return window.document;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof this.settings["mouse-event-element"] === "string") {
|
||||||
|
const mouseEventElement = document.querySelector(this.settings["mouse-event-element"]);
|
||||||
|
|
||||||
|
if (mouseEventElement) {
|
||||||
|
return mouseEventElement;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.settings["mouse-event-element"] instanceof Node) {
|
||||||
|
return this.settings["mouse-event-element"];
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.element;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method set listen methods for this.elementListener
|
||||||
|
* @return {Node}
|
||||||
|
*/
|
||||||
|
addEventListeners() {
|
||||||
|
this.onMouseEnterBind = this.onMouseEnter.bind(this);
|
||||||
|
this.onMouseMoveBind = this.onMouseMove.bind(this);
|
||||||
|
this.onMouseLeaveBind = this.onMouseLeave.bind(this);
|
||||||
|
this.onWindowResizeBind = this.onWindowResize.bind(this);
|
||||||
|
this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
|
||||||
|
|
||||||
|
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
|
||||||
|
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
|
||||||
|
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
|
||||||
|
|
||||||
|
if (this.glare || this.fullPageListening) {
|
||||||
|
window.addEventListener("resize", this.onWindowResizeBind);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.gyroscope) {
|
||||||
|
window.addEventListener("deviceorientation", this.onDeviceOrientationBind);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method remove event listeners from current this.elementListener
|
||||||
|
*/
|
||||||
|
removeEventListeners() {
|
||||||
|
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
|
||||||
|
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
|
||||||
|
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
|
||||||
|
|
||||||
|
if (this.gyroscope) {
|
||||||
|
window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.glare || this.fullPageListening) {
|
||||||
|
window.removeEventListener("resize", this.onWindowResizeBind);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
clearTimeout(this.transitionTimeout);
|
||||||
|
if (this.updateCall !== null) {
|
||||||
|
cancelAnimationFrame(this.updateCall);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.reset();
|
||||||
|
|
||||||
|
this.removeEventListeners();
|
||||||
|
this.element.vanillaTilt = null;
|
||||||
|
delete this.element.vanillaTilt;
|
||||||
|
|
||||||
|
this.element = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
onDeviceOrientation(event) {
|
||||||
|
if (event.gamma === null || event.beta === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateElementPosition();
|
||||||
|
|
||||||
|
if (this.gyroscopeSamples > 0) {
|
||||||
|
this.lastgammazero = this.gammazero;
|
||||||
|
this.lastbetazero = this.betazero;
|
||||||
|
|
||||||
|
if (this.gammazero === null) {
|
||||||
|
this.gammazero = event.gamma;
|
||||||
|
this.betazero = event.beta;
|
||||||
|
} else {
|
||||||
|
this.gammazero = (event.gamma + this.lastgammazero) / 2;
|
||||||
|
this.betazero = (event.beta + this.lastbetazero) / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.gyroscopeSamples -= 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
const totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX;
|
||||||
|
const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
|
||||||
|
|
||||||
|
const degreesPerPixelX = totalAngleX / this.width;
|
||||||
|
const degreesPerPixelY = totalAngleY / this.height;
|
||||||
|
|
||||||
|
const angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero);
|
||||||
|
const angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero);
|
||||||
|
|
||||||
|
const posX = angleX / degreesPerPixelX;
|
||||||
|
const posY = angleY / degreesPerPixelY;
|
||||||
|
|
||||||
|
if (this.updateCall !== null) {
|
||||||
|
cancelAnimationFrame(this.updateCall);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.event = {
|
||||||
|
clientX: posX + this.left,
|
||||||
|
clientY: posY + this.top,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.updateCall = requestAnimationFrame(this.updateBind);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseEnter() {
|
||||||
|
this.updateElementPosition();
|
||||||
|
this.element.style.willChange = "transform";
|
||||||
|
this.setTransition();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseMove(event) {
|
||||||
|
if (this.updateCall !== null) {
|
||||||
|
cancelAnimationFrame(this.updateCall);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.event = event;
|
||||||
|
this.updateCall = requestAnimationFrame(this.updateBind);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseLeave() {
|
||||||
|
this.setTransition();
|
||||||
|
|
||||||
|
if (this.settings.reset) {
|
||||||
|
requestAnimationFrame(this.resetBind);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.event = {
|
||||||
|
clientX: this.left + this.width / 2,
|
||||||
|
clientY: this.top + this.height / 2
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.element && this.element.style) {
|
||||||
|
this.element.style.transform = `perspective(${this.settings.perspective}px) ` +
|
||||||
|
`rotateX(0deg) ` +
|
||||||
|
`rotateY(0deg) ` +
|
||||||
|
`scale3d(1, 1, 1)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.resetGlare();
|
||||||
|
}
|
||||||
|
|
||||||
|
resetGlare() {
|
||||||
|
if (this.glare) {
|
||||||
|
this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)";
|
||||||
|
this.glareElement.style.opacity = "0";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateInitialPosition() {
|
||||||
|
if (this.settings.startX === 0 && this.settings.startY === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.onMouseEnter();
|
||||||
|
|
||||||
|
if (this.fullPageListening) {
|
||||||
|
this.event = {
|
||||||
|
clientX: (this.settings.startX + this.settings.max) / (2 * this.settings.max) * this.clientWidth,
|
||||||
|
clientY: (this.settings.startY + this.settings.max) / (2 * this.settings.max) * this.clientHeight
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
this.event = {
|
||||||
|
clientX: this.left + ((this.settings.startX + this.settings.max) / (2 * this.settings.max) * this.width),
|
||||||
|
clientY: this.top + ((this.settings.startY + this.settings.max) / (2 * this.settings.max) * this.height)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let backupScale = this.settings.scale;
|
||||||
|
this.settings.scale = 1;
|
||||||
|
this.update();
|
||||||
|
this.settings.scale = backupScale;
|
||||||
|
this.resetGlare();
|
||||||
|
}
|
||||||
|
|
||||||
|
getValues() {
|
||||||
|
let x, y;
|
||||||
|
|
||||||
|
if (this.fullPageListening) {
|
||||||
|
x = this.event.clientX / this.clientWidth;
|
||||||
|
y = this.event.clientY / this.clientHeight;
|
||||||
|
} else {
|
||||||
|
x = (this.event.clientX - this.left) / this.width;
|
||||||
|
y = (this.event.clientY - this.top) / this.height;
|
||||||
|
}
|
||||||
|
|
||||||
|
x = Math.min(Math.max(x, 0), 1);
|
||||||
|
y = Math.min(Math.max(y, 0), 1);
|
||||||
|
|
||||||
|
let tiltX = (this.reverse * (this.settings.max - x * this.settings.max * 2)).toFixed(2);
|
||||||
|
let tiltY = (this.reverse * (y * this.settings.max * 2 - this.settings.max)).toFixed(2);
|
||||||
|
let angle = Math.atan2(this.event.clientX - (this.left + this.width / 2), -(this.event.clientY - (this.top + this.height / 2))) * (180 / Math.PI);
|
||||||
|
|
||||||
|
return {
|
||||||
|
tiltX: tiltX,
|
||||||
|
tiltY: tiltY,
|
||||||
|
percentageX: x * 100,
|
||||||
|
percentageY: y * 100,
|
||||||
|
angle: angle
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
updateElementPosition() {
|
||||||
|
let rect = this.element.getBoundingClientRect();
|
||||||
|
|
||||||
|
this.width = this.element.offsetWidth;
|
||||||
|
this.height = this.element.offsetHeight;
|
||||||
|
this.left = rect.left;
|
||||||
|
this.top = rect.top;
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
let values = this.getValues();
|
||||||
|
|
||||||
|
this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
|
||||||
|
"rotateX(" + (this.settings.axis === "x" ? 0 : values.tiltY) + "deg) " +
|
||||||
|
"rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " +
|
||||||
|
"scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")";
|
||||||
|
|
||||||
|
if (this.glare) {
|
||||||
|
this.glareElement.style.transform = `rotate(${values.angle}deg) translate(-50%, -50%)`;
|
||||||
|
this.glareElement.style.opacity = `${values.percentageY * this.settings["max-glare"] / 100}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.element.dispatchEvent(new CustomEvent("tiltChange", {
|
||||||
|
"detail": values
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.updateCall = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Appends the glare element (if glarePrerender equals false)
|
||||||
|
* and sets the default style
|
||||||
|
*/
|
||||||
|
prepareGlare() {
|
||||||
|
// If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
|
||||||
|
if (!this.glarePrerender) {
|
||||||
|
// Create glare element
|
||||||
|
const jsTiltGlare = document.createElement("div");
|
||||||
|
jsTiltGlare.classList.add("js-tilt-glare");
|
||||||
|
|
||||||
|
const jsTiltGlareInner = document.createElement("div");
|
||||||
|
jsTiltGlareInner.classList.add("js-tilt-glare-inner");
|
||||||
|
|
||||||
|
jsTiltGlare.appendChild(jsTiltGlareInner);
|
||||||
|
this.element.appendChild(jsTiltGlare);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.glareElementWrapper = this.element.querySelector(".js-tilt-glare");
|
||||||
|
this.glareElement = this.element.querySelector(".js-tilt-glare-inner");
|
||||||
|
|
||||||
|
if (this.glarePrerender) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.assign(this.glareElementWrapper.style, {
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "0",
|
||||||
|
"left": "0",
|
||||||
|
"width": "100%",
|
||||||
|
"height": "100%",
|
||||||
|
"overflow": "hidden",
|
||||||
|
"pointer-events": "none"
|
||||||
|
});
|
||||||
|
|
||||||
|
Object.assign(this.glareElement.style, {
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "50%",
|
||||||
|
"left": "50%",
|
||||||
|
"pointer-events": "none",
|
||||||
|
"background-image": `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`,
|
||||||
|
"width": `${this.element.offsetWidth * 2}px`,
|
||||||
|
"height": `${this.element.offsetWidth * 2}px`,
|
||||||
|
"transform": "rotate(180deg) translate(-50%, -50%)",
|
||||||
|
"transform-origin": "0% 0%",
|
||||||
|
"opacity": "0",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
updateGlareSize() {
|
||||||
|
if (this.glare) {
|
||||||
|
Object.assign(this.glareElement.style, {
|
||||||
|
"width": `${this.element.offsetWidth * 2}`,
|
||||||
|
"height": `${this.element.offsetWidth * 2}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateClientSize() {
|
||||||
|
this.clientWidth = window.innerWidth
|
||||||
|
|| document.documentElement.clientWidth
|
||||||
|
|| document.body.clientWidth;
|
||||||
|
|
||||||
|
this.clientHeight = window.innerHeight
|
||||||
|
|| document.documentElement.clientHeight
|
||||||
|
|| document.body.clientHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
onWindowResize() {
|
||||||
|
this.updateGlareSize();
|
||||||
|
this.updateClientSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
setTransition() {
|
||||||
|
clearTimeout(this.transitionTimeout);
|
||||||
|
this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
|
||||||
|
if (this.glare) this.glareElement.style.transition = `opacity ${this.settings.speed}ms ${this.settings.easing}`;
|
||||||
|
|
||||||
|
this.transitionTimeout = setTimeout(() => {
|
||||||
|
this.element.style.transition = "";
|
||||||
|
if (this.glare) {
|
||||||
|
this.glareElement.style.transition = "";
|
||||||
|
}
|
||||||
|
}, this.settings.speed);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method return patched settings of instance
|
||||||
|
* @param {boolean} settings.reverse - reverse the tilt direction
|
||||||
|
* @param {number} settings.max - max tilt rotation (degrees)
|
||||||
|
* @param {startX} settings.startX - the starting tilt on the X axis, in degrees. Default: 0
|
||||||
|
* @param {startY} settings.startY - the starting tilt on the Y axis, in degrees. Default: 0
|
||||||
|
* @param {number} settings.perspective - Transform perspective, the lower the more extreme the tilt gets
|
||||||
|
* @param {string} settings.easing - Easing on enter/exit
|
||||||
|
* @param {number} settings.scale - 2 = 200%, 1.5 = 150%, etc..
|
||||||
|
* @param {number} settings.speed - Speed of the enter/exit transition
|
||||||
|
* @param {boolean} settings.transition - Set a transition on enter/exit
|
||||||
|
* @param {string|null} settings.axis - What axis should be disabled. Can be X or Y
|
||||||
|
* @param {boolean} settings.glare - What axis should be disabled. Can be X or Y
|
||||||
|
* @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
|
||||||
|
* @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise
|
||||||
|
* @param {boolean} settings.full-page-listening - If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
|
||||||
|
* @param {string|object} settings.mouse-event-element - String selector or link to HTML-element what will be listen mouse events
|
||||||
|
* @param {boolean} settings.reset - false = If the tilt effect has to be reset on exit
|
||||||
|
* @param {gyroscope} settings.gyroscope - Enable tilting by deviceorientation events
|
||||||
|
* @param {gyroscopeSensitivity} settings.gyroscopeSensitivity - Between 0 and 1 - The angle at which max tilt position is reached. 1 = 90deg, 0.5 = 45deg, etc..
|
||||||
|
* @param {gyroscopeSamples} settings.gyroscopeSamples - How many gyroscope moves to decide the starting position.
|
||||||
|
*/
|
||||||
|
extendSettings(settings) {
|
||||||
|
let defaultSettings = {
|
||||||
|
reverse: false,
|
||||||
|
max: 15,
|
||||||
|
startX: 0,
|
||||||
|
startY: 0,
|
||||||
|
perspective: 1000,
|
||||||
|
easing: "cubic-bezier(.03,.98,.52,.99)",
|
||||||
|
scale: 1,
|
||||||
|
speed: 300,
|
||||||
|
transition: true,
|
||||||
|
axis: null,
|
||||||
|
glare: false,
|
||||||
|
"max-glare": 1,
|
||||||
|
"glare-prerender": false,
|
||||||
|
"full-page-listening": false,
|
||||||
|
"mouse-event-element": null,
|
||||||
|
reset: true,
|
||||||
|
gyroscope: true,
|
||||||
|
gyroscopeMinAngleX: -45,
|
||||||
|
gyroscopeMaxAngleX: 45,
|
||||||
|
gyroscopeMinAngleY: -45,
|
||||||
|
gyroscopeMaxAngleY: 45,
|
||||||
|
gyroscopeSamples: 10
|
||||||
|
};
|
||||||
|
|
||||||
|
let newSettings = {};
|
||||||
|
for (var property in defaultSettings) {
|
||||||
|
if (property in settings) {
|
||||||
|
newSettings[property] = settings[property];
|
||||||
|
} else if (this.element.hasAttribute("data-tilt-" + property)) {
|
||||||
|
let attribute = this.element.getAttribute("data-tilt-" + property);
|
||||||
|
try {
|
||||||
|
newSettings[property] = JSON.parse(attribute);
|
||||||
|
} catch (e) {
|
||||||
|
newSettings[property] = attribute;
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
newSettings[property] = defaultSettings[property];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return newSettings;
|
||||||
|
}
|
||||||
|
|
||||||
|
static init(elements, settings) {
|
||||||
|
if (elements instanceof Node) {
|
||||||
|
elements = [elements];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (elements instanceof NodeList) {
|
||||||
|
elements = [].slice.call(elements);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!(elements instanceof Array)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
elements.forEach((element) => {
|
||||||
|
if (!("vanillaTilt" in element)) {
|
||||||
|
element.vanillaTilt = new VanillaTilt(element, settings);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof document !== "undefined") {
|
||||||
|
/* expose the class to window */
|
||||||
|
window.VanillaTilt = VanillaTilt;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Auto load
|
||||||
|
*/
|
||||||
|
VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
|
||||||
|
}
|
||||||
|
|
||||||
|
return VanillaTilt;
|
||||||
|
|
||||||
|
}());
|
||||||
+381
@@ -0,0 +1,381 @@
|
|||||||
|
/*!
|
||||||
|
*
|
||||||
|
* typed.js - A JavaScript Typing Animation Library
|
||||||
|
* Author: Matt Boldt <me@mattboldt.com>
|
||||||
|
* Version: v2.0.11
|
||||||
|
* Url: https://github.com/mattboldt/typed.js
|
||||||
|
* License(s): MIT
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
(function(t, e) {
|
||||||
|
"object" == typeof exports && "object" == typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define([], e) : "object" == typeof exports ? exports.Typed = e() : t.Typed = e()
|
||||||
|
})(this, function() {
|
||||||
|
return function(t) {
|
||||||
|
function e(n) {
|
||||||
|
if (s[n]) return s[n].exports;
|
||||||
|
var i = s[n] = {
|
||||||
|
exports: {},
|
||||||
|
id: n,
|
||||||
|
loaded: !1
|
||||||
|
};
|
||||||
|
return t[n].call(i.exports, i, i.exports, e), i.loaded = !0, i.exports
|
||||||
|
}
|
||||||
|
var s = {};
|
||||||
|
return e.m = t, e.c = s, e.p = "", e(0)
|
||||||
|
}([function(t, e, s) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
function n(t, e) {
|
||||||
|
if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
|
||||||
|
}
|
||||||
|
Object.defineProperty(e, "__esModule", {
|
||||||
|
value: !0
|
||||||
|
});
|
||||||
|
var i = function() {
|
||||||
|
function t(t, e) {
|
||||||
|
for (var s = 0; s < e.length; s++) {
|
||||||
|
var n = e[s];
|
||||||
|
n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(t, n.key, n)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return function(e, s, n) {
|
||||||
|
return s && t(e.prototype, s), n && t(e, n), e
|
||||||
|
}
|
||||||
|
}(),
|
||||||
|
r = s(1),
|
||||||
|
o = s(3),
|
||||||
|
a = function() {
|
||||||
|
function t(e, s) {
|
||||||
|
n(this, t), r.initializer.load(this, s, e), this.begin()
|
||||||
|
}
|
||||||
|
return i(t, [{
|
||||||
|
key: "toggle",
|
||||||
|
value: function() {
|
||||||
|
this.pause.status ? this.start() : this.stop()
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "stop",
|
||||||
|
value: function() {
|
||||||
|
this.typingComplete || this.pause.status || (this.toggleBlinking(!0), this.pause.status = !0, this.options.onStop(this.arrayPos, this))
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "start",
|
||||||
|
value: function() {
|
||||||
|
this.typingComplete || this.pause.status && (this.pause.status = !1, this.pause.typewrite ? this.typewrite(this.pause.curString, this.pause.curStrPos) : this.backspace(this.pause.curString, this.pause.curStrPos), this.options.onStart(this.arrayPos, this))
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "destroy",
|
||||||
|
value: function() {
|
||||||
|
this.reset(!1), this.options.onDestroy(this)
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "reset",
|
||||||
|
value: function() {
|
||||||
|
var t = arguments.length <= 0 || void 0 === arguments[0] || arguments[0];
|
||||||
|
clearInterval(this.timeout), this.replaceText(""), this.cursor && this.cursor.parentNode && (this.cursor.parentNode.removeChild(this.cursor), this.cursor = null), this.strPos = 0, this.arrayPos = 0, this.curLoop = 0, t && (this.insertCursor(), this.options.onReset(this), this.begin())
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "begin",
|
||||||
|
value: function() {
|
||||||
|
var t = this;
|
||||||
|
this.options.onBegin(this), this.typingComplete = !1, this.shuffleStringsIfNeeded(this), this.insertCursor(), this.bindInputFocusEvents && this.bindFocusEvents(), this.timeout = setTimeout(function() {
|
||||||
|
t.currentElContent && 0 !== t.currentElContent.length ? t.backspace(t.currentElContent, t.currentElContent.length) : t.typewrite(t.strings[t.sequence[t.arrayPos]], t.strPos)
|
||||||
|
}, this.startDelay)
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "typewrite",
|
||||||
|
value: function(t, e) {
|
||||||
|
var s = this;
|
||||||
|
this.fadeOut && this.el.classList.contains(this.fadeOutClass) && (this.el.classList.remove(this.fadeOutClass), this.cursor && this.cursor.classList.remove(this.fadeOutClass));
|
||||||
|
var n = this.humanizer(this.typeSpeed),
|
||||||
|
i = 1;
|
||||||
|
return this.pause.status === !0 ? void this.setPauseStatus(t, e, !0) : void(this.timeout = setTimeout(function() {
|
||||||
|
e = o.htmlParser.typeHtmlChars(t, e, s);
|
||||||
|
var n = 0,
|
||||||
|
r = t.substr(e);
|
||||||
|
if ("^" === r.charAt(0) && /^\^\d+/.test(r)) {
|
||||||
|
var a = 1;
|
||||||
|
r = /\d+/.exec(r)[0], a += r.length, n = parseInt(r), s.temporaryPause = !0, s.options.onTypingPaused(s.arrayPos, s), t = t.substring(0, e) + t.substring(e + a), s.toggleBlinking(!0)
|
||||||
|
}
|
||||||
|
if ("`" === r.charAt(0)) {
|
||||||
|
for (;
|
||||||
|
"`" !== t.substr(e + i).charAt(0) && (i++, !(e + i > t.length)););
|
||||||
|
var u = t.substring(0, e),
|
||||||
|
l = t.substring(u.length + 1, e + i),
|
||||||
|
c = t.substring(e + i + 1);
|
||||||
|
t = u + l + c, i--
|
||||||
|
}
|
||||||
|
s.timeout = setTimeout(function() {
|
||||||
|
s.toggleBlinking(!1), e >= t.length ? s.doneTyping(t, e) : s.keepTyping(t, e, i), s.temporaryPause && (s.temporaryPause = !1, s.options.onTypingResumed(s.arrayPos, s))
|
||||||
|
}, n)
|
||||||
|
}, n))
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "keepTyping",
|
||||||
|
value: function(t, e, s) {
|
||||||
|
0 === e && (this.toggleBlinking(!1), this.options.preStringTyped(this.arrayPos, this)), e += s;
|
||||||
|
var n = t.substr(0, e);
|
||||||
|
this.replaceText(n), this.typewrite(t, e)
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "doneTyping",
|
||||||
|
value: function(t, e) {
|
||||||
|
var s = this;
|
||||||
|
this.options.onStringTyped(this.arrayPos, this), this.toggleBlinking(!0), this.arrayPos === this.strings.length - 1 && (this.complete(), this.loop === !1 || this.curLoop === this.loopCount) || (this.timeout = setTimeout(function() {
|
||||||
|
s.backspace(t, e)
|
||||||
|
}, this.backDelay))
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "backspace",
|
||||||
|
value: function(t, e) {
|
||||||
|
var s = this;
|
||||||
|
if (this.pause.status === !0) return void this.setPauseStatus(t, e, !0);
|
||||||
|
if (this.fadeOut) return this.initFadeOut();
|
||||||
|
this.toggleBlinking(!1);
|
||||||
|
var n = this.humanizer(this.backSpeed);
|
||||||
|
this.timeout = setTimeout(function() {
|
||||||
|
e = o.htmlParser.backSpaceHtmlChars(t, e, s);
|
||||||
|
var n = t.substr(0, e);
|
||||||
|
if (s.replaceText(n), s.smartBackspace) {
|
||||||
|
var i = s.strings[s.arrayPos + 1];
|
||||||
|
i && n === i.substr(0, e) ? s.stopNum = e : s.stopNum = 0
|
||||||
|
}
|
||||||
|
e > s.stopNum ? (e--, s.backspace(t, e)) : e <= s.stopNum && (s.arrayPos++, s.arrayPos === s.strings.length ? (s.arrayPos = 0, s.options.onLastStringBackspaced(), s.shuffleStringsIfNeeded(), s.begin()) : s.typewrite(s.strings[s.sequence[s.arrayPos]], e))
|
||||||
|
}, n)
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "complete",
|
||||||
|
value: function() {
|
||||||
|
this.options.onComplete(this), this.loop ? this.curLoop++ : this.typingComplete = !0
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "setPauseStatus",
|
||||||
|
value: function(t, e, s) {
|
||||||
|
this.pause.typewrite = s, this.pause.curString = t, this.pause.curStrPos = e
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "toggleBlinking",
|
||||||
|
value: function(t) {
|
||||||
|
this.cursor && (this.pause.status || this.cursorBlinking !== t && (this.cursorBlinking = t, t ? this.cursor.classList.add("typed-cursor--blink") : this.cursor.classList.remove("typed-cursor--blink")))
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "humanizer",
|
||||||
|
value: function(t) {
|
||||||
|
return Math.round(Math.random() * t / 2) + t
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "shuffleStringsIfNeeded",
|
||||||
|
value: function() {
|
||||||
|
this.shuffle && (this.sequence = this.sequence.sort(function() {
|
||||||
|
return Math.random() - .5
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "initFadeOut",
|
||||||
|
value: function() {
|
||||||
|
var t = this;
|
||||||
|
return this.el.className += " " + this.fadeOutClass, this.cursor && (this.cursor.className += " " + this.fadeOutClass), setTimeout(function() {
|
||||||
|
t.arrayPos++, t.replaceText(""), t.strings.length > t.arrayPos ? t.typewrite(t.strings[t.sequence[t.arrayPos]], 0) : (t.typewrite(t.strings[0], 0), t.arrayPos = 0)
|
||||||
|
}, this.fadeOutDelay)
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "replaceText",
|
||||||
|
value: function(t) {
|
||||||
|
this.attr ? this.el.setAttribute(this.attr, t) : this.isInput ? this.el.value = t : "html" === this.contentType ? this.el.innerHTML = t : this.el.textContent = t
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "bindFocusEvents",
|
||||||
|
value: function() {
|
||||||
|
var t = this;
|
||||||
|
this.isInput && (this.el.addEventListener("focus", function(e) {
|
||||||
|
t.stop()
|
||||||
|
}), this.el.addEventListener("blur", function(e) {
|
||||||
|
t.el.value && 0 !== t.el.value.length || t.start()
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "insertCursor",
|
||||||
|
value: function() {
|
||||||
|
this.showCursor && (this.cursor || (this.cursor = document.createElement("span"), this.cursor.className = "typed-cursor", this.cursor.innerHTML = this.cursorChar, this.el.parentNode && this.el.parentNode.insertBefore(this.cursor, this.el.nextSibling)))
|
||||||
|
}
|
||||||
|
}]), t
|
||||||
|
}();
|
||||||
|
e["default"] = a, t.exports = e["default"]
|
||||||
|
}, function(t, e, s) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
function n(t) {
|
||||||
|
return t && t.__esModule ? t : {
|
||||||
|
"default": t
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function i(t, e) {
|
||||||
|
if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
|
||||||
|
}
|
||||||
|
Object.defineProperty(e, "__esModule", {
|
||||||
|
value: !0
|
||||||
|
});
|
||||||
|
var r = Object.assign || function(t) {
|
||||||
|
for (var e = 1; e < arguments.length; e++) {
|
||||||
|
var s = arguments[e];
|
||||||
|
for (var n in s) Object.prototype.hasOwnProperty.call(s, n) && (t[n] = s[n])
|
||||||
|
}
|
||||||
|
return t
|
||||||
|
},
|
||||||
|
o = function() {
|
||||||
|
function t(t, e) {
|
||||||
|
for (var s = 0; s < e.length; s++) {
|
||||||
|
var n = e[s];
|
||||||
|
n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(t, n.key, n)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return function(e, s, n) {
|
||||||
|
return s && t(e.prototype, s), n && t(e, n), e
|
||||||
|
}
|
||||||
|
}(),
|
||||||
|
a = s(2),
|
||||||
|
u = n(a),
|
||||||
|
l = function() {
|
||||||
|
function t() {
|
||||||
|
i(this, t)
|
||||||
|
}
|
||||||
|
return o(t, [{
|
||||||
|
key: "load",
|
||||||
|
value: function(t, e, s) {
|
||||||
|
if ("string" == typeof s ? t.el = document.querySelector(s) : t.el = s, t.options = r({}, u["default"], e), t.isInput = "input" === t.el.tagName.toLowerCase(), t.attr = t.options.attr, t.bindInputFocusEvents = t.options.bindInputFocusEvents, t.showCursor = !t.isInput && t.options.showCursor, t.cursorChar = t.options.cursorChar, t.cursorBlinking = !0, t.elContent = t.attr ? t.el.getAttribute(t.attr) : t.el.textContent, t.contentType = t.options.contentType, t.typeSpeed = t.options.typeSpeed, t.startDelay = t.options.startDelay, t.backSpeed = t.options.backSpeed, t.smartBackspace = t.options.smartBackspace, t.backDelay = t.options.backDelay, t.fadeOut = t.options.fadeOut, t.fadeOutClass = t.options.fadeOutClass, t.fadeOutDelay = t.options.fadeOutDelay, t.isPaused = !1, t.strings = t.options.strings.map(function(t) {
|
||||||
|
return t.trim()
|
||||||
|
}), "string" == typeof t.options.stringsElement ? t.stringsElement = document.querySelector(t.options.stringsElement) : t.stringsElement = t.options.stringsElement, t.stringsElement) {
|
||||||
|
t.strings = [], t.stringsElement.style.display = "none";
|
||||||
|
var n = Array.prototype.slice.apply(t.stringsElement.children),
|
||||||
|
i = n.length;
|
||||||
|
if (i)
|
||||||
|
for (var o = 0; o < i; o += 1) {
|
||||||
|
var a = n[o];
|
||||||
|
t.strings.push(a.innerHTML.trim())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
t.strPos = 0, t.arrayPos = 0, t.stopNum = 0, t.loop = t.options.loop, t.loopCount = t.options.loopCount, t.curLoop = 0, t.shuffle = t.options.shuffle, t.sequence = [], t.pause = {
|
||||||
|
status: !1,
|
||||||
|
typewrite: !0,
|
||||||
|
curString: "",
|
||||||
|
curStrPos: 0
|
||||||
|
}, t.typingComplete = !1;
|
||||||
|
for (var o in t.strings) t.sequence[o] = o;
|
||||||
|
t.currentElContent = this.getCurrentElContent(t), t.autoInsertCss = t.options.autoInsertCss, this.appendAnimationCss(t)
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "getCurrentElContent",
|
||||||
|
value: function(t) {
|
||||||
|
var e = "";
|
||||||
|
return e = t.attr ? t.el.getAttribute(t.attr) : t.isInput ? t.el.value : "html" === t.contentType ? t.el.innerHTML : t.el.textContent
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "appendAnimationCss",
|
||||||
|
value: function(t) {
|
||||||
|
var e = "data-typed-js-css";
|
||||||
|
if (t.autoInsertCss && (t.showCursor || t.fadeOut) && !document.querySelector("[" + e + "]")) {
|
||||||
|
var s = document.createElement("style");
|
||||||
|
s.type = "text/css", s.setAttribute(e, !0);
|
||||||
|
var n = "";
|
||||||
|
t.showCursor && (n += "\n .typed-cursor{\n opacity: 1;\n }\n .typed-cursor.typed-cursor--blink{\n animation: typedjsBlink 0.7s infinite;\n -webkit-animation: typedjsBlink 0.7s infinite;\n animation: typedjsBlink 0.7s infinite;\n }\n @keyframes typedjsBlink{\n 50% { opacity: 0.0; }\n }\n @-webkit-keyframes typedjsBlink{\n 0% { opacity: 1; }\n 50% { opacity: 0.0; }\n 100% { opacity: 1; }\n }\n "), t.fadeOut && (n += "\n .typed-fade-out{\n opacity: 0;\n transition: opacity .25s;\n }\n .typed-cursor.typed-cursor--blink.typed-fade-out{\n -webkit-animation: 0;\n animation: 0;\n }\n "), 0 !== s.length && (s.innerHTML = n, document.body.appendChild(s))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]), t
|
||||||
|
}();
|
||||||
|
e["default"] = l;
|
||||||
|
var c = new l;
|
||||||
|
e.initializer = c
|
||||||
|
}, function(t, e) {
|
||||||
|
"use strict";
|
||||||
|
Object.defineProperty(e, "__esModule", {
|
||||||
|
value: !0
|
||||||
|
});
|
||||||
|
var s = {
|
||||||
|
strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
|
||||||
|
stringsElement: null,
|
||||||
|
typeSpeed: 0,
|
||||||
|
startDelay: 0,
|
||||||
|
backSpeed: 0,
|
||||||
|
smartBackspace: !0,
|
||||||
|
shuffle: !1,
|
||||||
|
backDelay: 700,
|
||||||
|
fadeOut: !1,
|
||||||
|
fadeOutClass: "typed-fade-out",
|
||||||
|
fadeOutDelay: 500,
|
||||||
|
loop: !1,
|
||||||
|
loopCount: 1 / 0,
|
||||||
|
showCursor: !0,
|
||||||
|
cursorChar: "|",
|
||||||
|
autoInsertCss: !0,
|
||||||
|
attr: null,
|
||||||
|
bindInputFocusEvents: !1,
|
||||||
|
contentType: "html",
|
||||||
|
onBegin: function(t) {},
|
||||||
|
onComplete: function(t) {},
|
||||||
|
preStringTyped: function(t, e) {},
|
||||||
|
onStringTyped: function(t, e) {},
|
||||||
|
onLastStringBackspaced: function(t) {},
|
||||||
|
onTypingPaused: function(t, e) {},
|
||||||
|
onTypingResumed: function(t, e) {},
|
||||||
|
onReset: function(t) {},
|
||||||
|
onStop: function(t, e) {},
|
||||||
|
onStart: function(t, e) {},
|
||||||
|
onDestroy: function(t) {}
|
||||||
|
};
|
||||||
|
e["default"] = s, t.exports = e["default"]
|
||||||
|
}, function(t, e) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
function s(t, e) {
|
||||||
|
if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
|
||||||
|
}
|
||||||
|
Object.defineProperty(e, "__esModule", {
|
||||||
|
value: !0
|
||||||
|
});
|
||||||
|
var n = function() {
|
||||||
|
function t(t, e) {
|
||||||
|
for (var s = 0; s < e.length; s++) {
|
||||||
|
var n = e[s];
|
||||||
|
n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(t, n.key, n)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return function(e, s, n) {
|
||||||
|
return s && t(e.prototype, s), n && t(e, n), e
|
||||||
|
}
|
||||||
|
}(),
|
||||||
|
i = function() {
|
||||||
|
function t() {
|
||||||
|
s(this, t)
|
||||||
|
}
|
||||||
|
return n(t, [{
|
||||||
|
key: "typeHtmlChars",
|
||||||
|
value: function(t, e, s) {
|
||||||
|
if ("html" !== s.contentType) return e;
|
||||||
|
var n = t.substr(e).charAt(0);
|
||||||
|
if ("<" === n || "&" === n) {
|
||||||
|
var i = "";
|
||||||
|
for (i = "<" === n ? ">" : ";"; t.substr(e + 1).charAt(0) !== i && (e++, !(e + 1 > t.length)););
|
||||||
|
e++
|
||||||
|
}
|
||||||
|
return e
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: "backSpaceHtmlChars",
|
||||||
|
value: function(t, e, s) {
|
||||||
|
if ("html" !== s.contentType) return e;
|
||||||
|
var n = t.substr(e).charAt(0);
|
||||||
|
if (">" === n || ";" === n) {
|
||||||
|
var i = "";
|
||||||
|
for (i = ">" === n ? "<" : "&"; t.substr(e - 1).charAt(0) !== i && (e--, !(e < 0)););
|
||||||
|
e--
|
||||||
|
}
|
||||||
|
return e
|
||||||
|
}
|
||||||
|
}]), t
|
||||||
|
}();
|
||||||
|
e["default"] = i;
|
||||||
|
var r = new i;
|
||||||
|
e.htmlParser = r
|
||||||
|
}])
|
||||||
|
});
|
||||||
Vendored
+27236
File diff suppressed because it is too large
Load Diff
Vendored
+27236
File diff suppressed because it is too large
Load Diff
Vendored
+597
@@ -0,0 +1,597 @@
|
|||||||
|
/*--------------------------------
|
||||||
|
|
||||||
|
hermes-dashboard-icons Web Font - built using nucleoapp.com
|
||||||
|
License - nucleoapp.com/license/
|
||||||
|
|
||||||
|
-------------------------------- */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'NucleoIcons';
|
||||||
|
src: url('../fonts/nucleo-icons.eot');
|
||||||
|
src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype'), url('../fonts/nucleo-icons.svg') format('svg');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*------------------------
|
||||||
|
base class definition
|
||||||
|
-------------------------*/
|
||||||
|
.ni {
|
||||||
|
display: inline-block;
|
||||||
|
font: normal normal normal 14px/1 NucleoIcons;
|
||||||
|
font-size: inherit;
|
||||||
|
text-rendering: auto;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*------------------------
|
||||||
|
change icon size
|
||||||
|
-------------------------*/
|
||||||
|
.ni-lg {
|
||||||
|
font-size: 1.33333333em;
|
||||||
|
line-height: 0.75em;
|
||||||
|
vertical-align: -15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-2x {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-3x {
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-4x {
|
||||||
|
font-size: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-5x {
|
||||||
|
font-size: 5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*----------------------------------
|
||||||
|
add a square/circle background
|
||||||
|
-----------------------------------*/
|
||||||
|
.ni.square,
|
||||||
|
.ni.circle {
|
||||||
|
padding: 0.33333333em;
|
||||||
|
vertical-align: -16%;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni.circle {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*------------------------
|
||||||
|
list icons
|
||||||
|
-------------------------*/
|
||||||
|
.ni-ul {
|
||||||
|
padding-left: 0;
|
||||||
|
margin-left: 2.14285714em;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-ul>li {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-ul>li>.ni {
|
||||||
|
position: absolute;
|
||||||
|
left: -1.57142857em;
|
||||||
|
top: 0.14285714em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-ul>li>.ni.lg {
|
||||||
|
top: 0;
|
||||||
|
left: -1.35714286em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-ul>li>.ni.circle,
|
||||||
|
.ni-ul>li>.ni.square {
|
||||||
|
top: -0.19047619em;
|
||||||
|
left: -1.9047619em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*------------------------
|
||||||
|
spinning icons
|
||||||
|
-------------------------*/
|
||||||
|
.ni.spin {
|
||||||
|
-webkit-animation: nc-spin 2s infinite linear;
|
||||||
|
-moz-animation: nc-spin 2s infinite linear;
|
||||||
|
animation: nc-spin 2s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes nc-spin {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes nc-spin {
|
||||||
|
0% {
|
||||||
|
-moz-transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-moz-transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes nc-spin {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
-moz-transform: rotate(0deg);
|
||||||
|
-ms-transform: rotate(0deg);
|
||||||
|
-o-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
-moz-transform: rotate(360deg);
|
||||||
|
-ms-transform: rotate(360deg);
|
||||||
|
-o-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*------------------------
|
||||||
|
rotated/flipped icons
|
||||||
|
-------------------------*/
|
||||||
|
.ni.rotate-90 {
|
||||||
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
-moz-transform: rotate(90deg);
|
||||||
|
-ms-transform: rotate(90deg);
|
||||||
|
-o-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni.rotate-180 {
|
||||||
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
-moz-transform: rotate(180deg);
|
||||||
|
-ms-transform: rotate(180deg);
|
||||||
|
-o-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni.rotate-270 {
|
||||||
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
-moz-transform: rotate(270deg);
|
||||||
|
-ms-transform: rotate(270deg);
|
||||||
|
-o-transform: rotate(270deg);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni.flip-y {
|
||||||
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
|
||||||
|
-webkit-transform: scale(-1, 1);
|
||||||
|
-moz-transform: scale(-1, 1);
|
||||||
|
-ms-transform: scale(-1, 1);
|
||||||
|
-o-transform: scale(-1, 1);
|
||||||
|
transform: scale(-1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni.flip-x {
|
||||||
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||||
|
-webkit-transform: scale(1, -1);
|
||||||
|
-moz-transform: scale(1, -1);
|
||||||
|
-ms-transform: scale(1, -1);
|
||||||
|
-o-transform: scale(1, -1);
|
||||||
|
transform: scale(1, -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*------------------------
|
||||||
|
font icons
|
||||||
|
-------------------------*/
|
||||||
|
|
||||||
|
.ni-active-40::before {
|
||||||
|
content: "\ea02";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-air-baloon::before {
|
||||||
|
content: "\ea03";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-album-2::before {
|
||||||
|
content: "\ea04";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-align-center::before {
|
||||||
|
content: "\ea05";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-align-left-2::before {
|
||||||
|
content: "\ea06";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-ambulance::before {
|
||||||
|
content: "\ea07";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-app::before {
|
||||||
|
content: "\ea08";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-archive-2::before {
|
||||||
|
content: "\ea09";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-atom::before {
|
||||||
|
content: "\ea0a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-badge::before {
|
||||||
|
content: "\ea0b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-bag-17::before {
|
||||||
|
content: "\ea0c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-basket::before {
|
||||||
|
content: "\ea0d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-bell-55::before {
|
||||||
|
content: "\ea0e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-bold-down::before {
|
||||||
|
content: "\ea0f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-bold-left::before {
|
||||||
|
content: "\ea10";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-bold-right::before {
|
||||||
|
content: "\ea11";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-bold-up::before {
|
||||||
|
content: "\ea12";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-bold::before {
|
||||||
|
content: "\ea13";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-book-bookmark::before {
|
||||||
|
content: "\ea14";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-books::before {
|
||||||
|
content: "\ea15";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-box-2::before {
|
||||||
|
content: "\ea16";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-briefcase-24::before {
|
||||||
|
content: "\ea17";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-building::before {
|
||||||
|
content: "\ea18";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-bulb-61::before {
|
||||||
|
content: "\ea19";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-bullet-list-67::before {
|
||||||
|
content: "\ea1a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-bus-front-12::before {
|
||||||
|
content: "\ea1b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-button-pause::before {
|
||||||
|
content: "\ea1c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-button-play::before {
|
||||||
|
content: "\ea1d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-button-power::before {
|
||||||
|
content: "\ea1e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-calendar-grid-58::before {
|
||||||
|
content: "\ea1f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-camera-compact::before {
|
||||||
|
content: "\ea20";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-caps-small::before {
|
||||||
|
content: "\ea21";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-cart::before {
|
||||||
|
content: "\ea22";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-chart-bar-32::before {
|
||||||
|
content: "\ea23";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-chart-pie-35::before {
|
||||||
|
content: "\ea24";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-chat-round::before {
|
||||||
|
content: "\ea25";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-check-bold::before {
|
||||||
|
content: "\ea26";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-circle-08::before {
|
||||||
|
content: "\ea27";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-cloud-download-95::before {
|
||||||
|
content: "\ea28";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-cloud-upload-96::before {
|
||||||
|
content: "\ea29";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-compass-04::before {
|
||||||
|
content: "\ea2a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-controller::before {
|
||||||
|
content: "\ea2b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-credit-card::before {
|
||||||
|
content: "\ea2c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-curved-next::before {
|
||||||
|
content: "\ea2d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-delivery-fast::before {
|
||||||
|
content: "\ea2e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-diamond::before {
|
||||||
|
content: "\ea2f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-email-83::before {
|
||||||
|
content: "\ea30";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-fat-add::before {
|
||||||
|
content: "\ea31";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-fat-delete::before {
|
||||||
|
content: "\ea32";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-fat-remove::before {
|
||||||
|
content: "\ea33";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-favourite-28::before {
|
||||||
|
content: "\ea34";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-folder-17::before {
|
||||||
|
content: "\ea35";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-glasses-2::before {
|
||||||
|
content: "\ea36";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-hat-3::before {
|
||||||
|
content: "\ea37";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-headphones::before {
|
||||||
|
content: "\ea38";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-html5::before {
|
||||||
|
content: "\ea39";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-istanbul::before {
|
||||||
|
content: "\ea3a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-key-25::before {
|
||||||
|
content: "\ea3b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-laptop::before {
|
||||||
|
content: "\ea3c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-like-2::before {
|
||||||
|
content: "\ea3d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-lock-circle-open::before {
|
||||||
|
content: "\ea3e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-map-big::before {
|
||||||
|
content: "\ea3f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-mobile-button::before {
|
||||||
|
content: "\ea40";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-money-coins::before {
|
||||||
|
content: "\ea41";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-note-03::before {
|
||||||
|
content: "\ea42";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-notification-70::before {
|
||||||
|
content: "\ea43";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-palette::before {
|
||||||
|
content: "\ea44";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-paper-diploma::before {
|
||||||
|
content: "\ea45";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-pin-3::before {
|
||||||
|
content: "\ea46";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-planet::before {
|
||||||
|
content: "\ea47";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-ruler-pencil::before {
|
||||||
|
content: "\ea48";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-satisfied::before {
|
||||||
|
content: "\ea49";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-scissors::before {
|
||||||
|
content: "\ea4a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-send::before {
|
||||||
|
content: "\ea4b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-settings-gear-65::before {
|
||||||
|
content: "\ea4c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-settings::before {
|
||||||
|
content: "\ea4d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-single-02::before {
|
||||||
|
content: "\ea4e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-single-copy-04::before {
|
||||||
|
content: "\ea4f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-sound-wave::before {
|
||||||
|
content: "\ea50";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-spaceship::before {
|
||||||
|
content: "\ea51";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-square-pin::before {
|
||||||
|
content: "\ea52";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-support-16::before {
|
||||||
|
content: "\ea53";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-tablet-button::before {
|
||||||
|
content: "\ea54";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-tag::before {
|
||||||
|
content: "\ea55";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-tie-bow::before {
|
||||||
|
content: "\ea56";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-time-alarm::before {
|
||||||
|
content: "\ea57";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-trophy::before {
|
||||||
|
content: "\ea58";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-tv-2::before {
|
||||||
|
content: "\ea59";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-umbrella-13::before {
|
||||||
|
content: "\ea5a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-user-run::before {
|
||||||
|
content: "\ea5b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-vector::before {
|
||||||
|
content: "\ea5c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-watch-time::before {
|
||||||
|
content: "\ea5d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-world::before {
|
||||||
|
content: "\ea5e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-zoom-split-in::before {
|
||||||
|
content: "\ea5f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-collection::before {
|
||||||
|
content: "\ea60";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-image::before {
|
||||||
|
content: "\ea61";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-shop::before {
|
||||||
|
content: "\ea62";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-ungroup::before {
|
||||||
|
content: "\ea63";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-world-2::before {
|
||||||
|
content: "\ea64";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ni-ui-04::before {
|
||||||
|
content: "\ea65";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* all icon font classes list here */
|
||||||
Vendored
+135
@@ -0,0 +1,135 @@
|
|||||||
|
/* Generated using nucleoapp.com */
|
||||||
|
/* --------------------------------
|
||||||
|
|
||||||
|
Icon colors
|
||||||
|
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: inline-block;
|
||||||
|
/* icon primary color */
|
||||||
|
color: #111111;
|
||||||
|
height: 1em;
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon use {
|
||||||
|
/* icon secondary color - fill */
|
||||||
|
fill: #7ea6f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon.icon-outline use {
|
||||||
|
/* icon secondary color - stroke */
|
||||||
|
stroke: #7ea6f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------
|
||||||
|
|
||||||
|
Change icon size
|
||||||
|
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
.icon-xs {
|
||||||
|
height: 0.5em;
|
||||||
|
width: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-sm {
|
||||||
|
height: 0.8em;
|
||||||
|
width: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-lg {
|
||||||
|
height: 1.6em;
|
||||||
|
width: 1.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-xl {
|
||||||
|
height: 2em;
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------
|
||||||
|
|
||||||
|
Align icon and text
|
||||||
|
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
.icon-text-aligner {
|
||||||
|
/* add this class to parent element that contains icon + text */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-text-aligner .icon {
|
||||||
|
color: inherit;
|
||||||
|
margin-right: 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-text-aligner .icon use {
|
||||||
|
color: inherit;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-text-aligner .icon.icon-outline use {
|
||||||
|
stroke: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------
|
||||||
|
|
||||||
|
Icon reset values - used to enable color customizations
|
||||||
|
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
fill: currentColor;
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon.icon-outline {
|
||||||
|
fill: none;
|
||||||
|
stroke: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon use {
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon.icon-outline use {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------
|
||||||
|
|
||||||
|
Stroke effects - Nucleo outline icons
|
||||||
|
|
||||||
|
- 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes)
|
||||||
|
- 24px, 32px icons -> up to 2px stroke
|
||||||
|
- 48px, 64px icons -> up to 4px stroke
|
||||||
|
|
||||||
|
-------------------------------- */
|
||||||
|
|
||||||
|
.icon-outline.icon-stroke-1 {
|
||||||
|
stroke-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-outline.icon-stroke-2 {
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-outline.icon-stroke-3 {
|
||||||
|
stroke-width: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-outline.icon-stroke-4 {
|
||||||
|
stroke-width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-outline.icon-stroke-1 use,
|
||||||
|
.icon-outline.icon-stroke-3 use {
|
||||||
|
-webkit-transform: translateX(0.5px) translateY(0.5px);
|
||||||
|
-moz-transform: translateX(0.5px) translateY(0.5px);
|
||||||
|
-ms-transform: translateX(0.5px) translateY(0.5px);
|
||||||
|
-o-transform: translateX(0.5px) translateY(0.5px);
|
||||||
|
transform: translateX(0.5px) translateY(0.5px);
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
@extends('includes.login.index')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
|
||||||
|
<title>Pertama Kali | Customer Portal</title>
|
||||||
|
|
||||||
|
<h6 style="text-align: center; margin-bottom: 10%;">Pertama Kali Masuk ke Customer Portal</h6>
|
||||||
|
|
||||||
|
<form role="form" class="text-start">
|
||||||
|
<div class="input-group input-group-outline my-3">
|
||||||
|
<label class="form-label">Email</label>
|
||||||
|
<input type="email" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="input-group input-group-outline mb-3">
|
||||||
|
<label class="form-label">One-Time-Password</label>
|
||||||
|
<input type="password" class="form-control">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<button type="button" class="btn bg-gradient-dark w-100 my-4 mb-2" style="background: #4A4E59;">Daftar Masuk</button>
|
||||||
|
</div>
|
||||||
|
<p class="mt-6 text-sm text-center">
|
||||||
|
|
||||||
|
<a href="/loginportal">Log Masuk</a>
|
||||||
|
<a href="#" class="text-dark text-gradient font-weight-bold"> | </a>
|
||||||
|
<a href="/forgetpassword">Lupa Kata Laluan</a>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
@endsection
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
@extends('includes.login.index')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
|
||||||
|
<title>Lupa Kata Laluan | Customer Portal</title>
|
||||||
|
|
||||||
|
<h6 style="text-align: center; margin-bottom: 10%;">Lupa Kata Laluan</h6>
|
||||||
|
|
||||||
|
<form role="form" class="text-start">
|
||||||
|
<p>Sila masukkan email</p>
|
||||||
|
<div class="input-group input-group-outline my-3">
|
||||||
|
|
||||||
|
<input type="email" class="form-control">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<button type="button" class="btn bg-gradient-dark w-100 my-4 mb-2" style="background: #4A4E59;">Tetap Semula Kata Laluan</button>
|
||||||
|
</div>
|
||||||
|
<p class="mt-6 text-sm text-center">
|
||||||
|
|
||||||
|
<a href="/firsttime">Pertama Kali</a>
|
||||||
|
<a href="#" class="text-dark text-gradient font-weight-bold"> | </a>
|
||||||
|
<a href="/loginportal">Log-Masuk</a>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
@endsection
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.background {
|
||||||
|
max-width: -webkit-fill-available;
|
||||||
|
padding: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-primary {
|
||||||
|
box-shadow: #4A4E59 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-primary {
|
||||||
|
color: #4A4E59 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
|
||||||
|
<!-- Fonts and icons -->
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||||
|
<!-- Nucleo Icons -->
|
||||||
|
<link href="{{ asset('css/nucleo-icons.css') }}" rel="stylesheet">
|
||||||
|
<link href="{{ asset('css/nucleo-svg.css') }}" rel="stylesheet">
|
||||||
|
<link href="{{ asset('argon') }}/img/brand/ARRAHN1.png" rel="icon" type="image/png">
|
||||||
|
|
||||||
|
<!-- Material Icons -->
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||||
|
<!-- CSS Files -->
|
||||||
|
<link href="{{ asset('css/material-kit-login.css') }}" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="sign-in-basic">
|
||||||
|
|
||||||
|
<div class="page-header align-items-start min-vh-100" style="background-image: url('/argon/login/backg4.jpg');" loading="lazy">
|
||||||
|
<span class="mask bg-gradient-dark opacity-6"></span>
|
||||||
|
<div class="container my-auto">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-md-8 col-12 mx-auto">
|
||||||
|
<div class="card z-index-0 fadeIn3 fadeInBottom">
|
||||||
|
|
||||||
|
<!-- <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||||
|
<div class="bg-gradient-primary border-radius-lg py-3 pe-1" style="background: #4A4E59;">
|
||||||
|
<img src="{{ asset('/argon/login/logo_arrahn_baru2.png') }}" alt="Logo Ar Rahn" class="background" style="text-align: center;">
|
||||||
|
<h3 style="text-align: center; color:#12B652">CUSTOMER PORTAL</h3>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||||
|
<div class="bg-gradient-primary border-radius-lg py-3 pe-1" style="background: #4A4E59;">
|
||||||
|
<h4 class="text-white font-weight-bolder text-center mt-2 mb-0">Customer Portal</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
@yield('content')
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer position-absolute bottom-2 py-2 w-100">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row align-items-center justify-content-lg-between">
|
||||||
|
<div class="col-12 col-md-6 my-auto">
|
||||||
|
<div class="copyright text-center text-sm text-white text-lg-start">
|
||||||
|
@2021, Copyright Permodalan Kelantan Berhad
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-6">
|
||||||
|
<ul class="nav nav-footer justify-content-center justify-content-lg-end">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="#" class="nav-link text-white">About Us</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="#" class="nav-link text-white">Contact Us</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Core JS Files -->
|
||||||
|
<script src="{{ asset('assets/js/material-kit/core/popper.min.js') }}" type="text/javascript"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="{{ asset('assets/js/material-kit/core/bootstrap.min.js') }}" type="text/javascript"></script>
|
||||||
|
|
||||||
|
<script src="{{ asset('assets/js/material-kit/plugins/perfect-scrollbar.min.js') }}"></script>
|
||||||
|
|
||||||
|
<!-- Plugin for Parallax, full documentation here: https://github.com/wagerfield/parallax -->
|
||||||
|
<script src="{{ asset('assets/js/material-kit/plugins/parallax.min.js') }}"></script>
|
||||||
|
|
||||||
|
<!-- Control Center for Material UI Kit: parallax effects, scripts for the example pages etc -->
|
||||||
|
<!-- Google Maps Plugin -->
|
||||||
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script>
|
||||||
|
<script src="{{ asset('assets/js/material-kit/material-kit.min.js?v=3.0.0') }}" type="text/javascript"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
@extends('includes.login.index')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
|
||||||
|
<title>Log In | Customer Portal</title>
|
||||||
|
|
||||||
|
<h6 style="text-align: center; margin-bottom: 10%;">Log-Masuk ke Customer Portal</h6>
|
||||||
|
|
||||||
|
<form role="form" class="text-start">
|
||||||
|
<div class="input-group input-group-outline my-3">
|
||||||
|
<label class="form-label">Email</label>
|
||||||
|
<input type="email" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="input-group input-group-outline mb-3">
|
||||||
|
<label class="form-label">Password</label>
|
||||||
|
<input type="password" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="form-check form-switch d-flex align-items-center mb-3">
|
||||||
|
<input class="form-check-input" type="checkbox" id="rememberMe">
|
||||||
|
<label class="form-check-label mb-0 ms-2" for="rememberMe">Remember me</label>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<button type="button" class="btn bg-gradient-dark w-100 my-4 mb-2" style="background: #4A4E59;">Log In</button>
|
||||||
|
</div>
|
||||||
|
<p class="mt-6 text-sm text-center">
|
||||||
|
|
||||||
|
<a href="/firsttime">Pertama Kali</a>
|
||||||
|
<a href="#" class="text-dark text-gradient font-weight-bold"> | </a>
|
||||||
|
<a href="/forgetpassword">Lupa Kata Laluan</a>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
@endsection
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -16,6 +16,19 @@ use Illuminate\Support\Facades\Route;
|
|||||||
// Route::get('/', function () {
|
// Route::get('/', function () {
|
||||||
// return view('welcome');
|
// return view('welcome');
|
||||||
// });
|
// });
|
||||||
|
Route::get('/loginportal', function () {
|
||||||
|
return view('/includes/login/loginportal');
|
||||||
|
});
|
||||||
|
Route::get('/forgetpassword', function () {
|
||||||
|
return view('/includes/login/forgetpassword');
|
||||||
|
});
|
||||||
|
Route::get('/firsttime', function () {
|
||||||
|
return view('/includes/login/firsttime');
|
||||||
|
});
|
||||||
|
Route::get('/portalhome', function () {
|
||||||
|
return view('/includes/login/firsttime');
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
Route::get('/', function () {
|
Route::get('/', function () {
|
||||||
return view('dashboard');
|
return view('dashboard');
|
||||||
|
|||||||
Reference in New Issue
Block a user