Added styles
This commit is contained in:
James Dinh
parent
230ee5711c
commit
dc1f17eb2f
BIN
assets/.DS_Store
vendored
Normal file
BIN
assets/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
css/.DS_Store
vendored
Normal file
BIN
css/.DS_Store
vendored
Normal file
Binary file not shown.
@ -1387,6 +1387,64 @@ section {
|
||||
transition: opacity .2s ease;
|
||||
}
|
||||
|
||||
.timeline-description {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.timeline-description-list li {
|
||||
margin: 10px 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.important-text {
|
||||
color: rgb(255, 126, 126);
|
||||
}
|
||||
|
||||
.timeline-links {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.timeline-icon {
|
||||
height: 23px;
|
||||
width: 75px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.timeline-button {
|
||||
color: rgb(233, 203, 104);
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
font-size: 18px;
|
||||
border: 1px solid rgb(192, 168, 88);
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.zoom-link {
|
||||
border: 1px solid rgb(45, 140, 255);
|
||||
}
|
||||
|
||||
.timeline-button.zoom-link:hover {
|
||||
background-color: rgb(45, 140, 255);
|
||||
}
|
||||
|
||||
.timeline-button.zoom-link:hover > .timeline-icon{
|
||||
filter:hue-rotate(60deg);
|
||||
}
|
||||
|
||||
.timeline-button:hover {
|
||||
color: white;
|
||||
background-color: rgb(192, 168, 88);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
/**
|
||||
* Time
|
||||
*/
|
||||
|
||||
BIN
img/.DS_Store
vendored
Normal file
BIN
img/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
js/.DS_Store
vendored
Normal file
BIN
js/.DS_Store
vendored
Normal file
Binary file not shown.
196
js/general.js
196
js/general.js
@ -371,117 +371,117 @@ document.addEventListener(
|
||||
false
|
||||
);
|
||||
|
||||
var slider = document.getElementById('slider'),
|
||||
sliderItems = document.getElementById('items'),
|
||||
prev = document.getElementById('prev'),
|
||||
next = document.getElementById('next');
|
||||
slide(slider, sliderItems, prev, next);
|
||||
function slide(wrapper, items, prev, next) {
|
||||
var posX1 = 0,
|
||||
posX2 = 0,
|
||||
posInitial,
|
||||
posFinal,
|
||||
threshold = 100,
|
||||
slides = items.getElementsByClassName('slide'),
|
||||
slidesLength = slides.length,
|
||||
slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
|
||||
firstSlide = slides[0],
|
||||
lastSlide = slides[slidesLength - 1],
|
||||
cloneFirst = firstSlide.cloneNode(true),
|
||||
cloneLast = lastSlide.cloneNode(true),
|
||||
index = 0,
|
||||
allowShift = true;
|
||||
// var slider = document.getElementById('slider'),
|
||||
// sliderItems = document.getElementById('items'),
|
||||
// prev = document.getElementById('prev'),
|
||||
// next = document.getElementById('next');
|
||||
// slide(slider, sliderItems, prev, next);
|
||||
// function slide(wrapper, items, prev, next) {
|
||||
// var posX1 = 0,
|
||||
// posX2 = 0,
|
||||
// posInitial,
|
||||
// posFinal,
|
||||
// threshold = 100,
|
||||
// slides = items.getElementsByClassName('slide'),
|
||||
// slidesLength = slides.length,
|
||||
// slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
|
||||
// firstSlide = slides[0],
|
||||
// lastSlide = slides[slidesLength - 1],
|
||||
// cloneFirst = firstSlide.cloneNode(true),
|
||||
// cloneLast = lastSlide.cloneNode(true),
|
||||
// index = 0,
|
||||
// allowShift = true;
|
||||
|
||||
// Clone first and last slide
|
||||
items.appendChild(cloneFirst);
|
||||
items.insertBefore(cloneLast, firstSlide);
|
||||
wrapper.classList.add('loaded');
|
||||
// // Clone first and last slide
|
||||
// items.appendChild(cloneFirst);
|
||||
// items.insertBefore(cloneLast, firstSlide);
|
||||
// wrapper.classList.add('loaded');
|
||||
|
||||
// Mouse and Touch events
|
||||
items.onmousedown = dragStart;
|
||||
// // Mouse and Touch events
|
||||
// items.onmousedown = dragStart;
|
||||
|
||||
// Touch events
|
||||
items.addEventListener('touchstart', dragStart);
|
||||
items.addEventListener('touchend', dragEnd);
|
||||
items.addEventListener('touchmove', dragAction);
|
||||
// // Touch events
|
||||
// items.addEventListener('touchstart', dragStart);
|
||||
// items.addEventListener('touchend', dragEnd);
|
||||
// items.addEventListener('touchmove', dragAction);
|
||||
|
||||
// Click events
|
||||
prev.addEventListener('click', function () { shiftSlide(-1) });
|
||||
next.addEventListener('click', function () { shiftSlide(1) });
|
||||
// // Click events
|
||||
// prev.addEventListener('click', function () { shiftSlide(-1) });
|
||||
// next.addEventListener('click', function () { shiftSlide(1) });
|
||||
|
||||
// Transition events
|
||||
items.addEventListener('transitionend', checkIndex);
|
||||
// // Transition events
|
||||
// items.addEventListener('transitionend', checkIndex);
|
||||
|
||||
function dragStart (e) {
|
||||
e = e || window.event;
|
||||
e.preventDefault();
|
||||
posInitial = items.offsetLeft;
|
||||
// function dragStart (e) {
|
||||
// e = e || window.event;
|
||||
// e.preventDefault();
|
||||
// posInitial = items.offsetLeft;
|
||||
|
||||
if (e.type == 'touchstart') {
|
||||
posX1 = e.touches[0].clientX;
|
||||
} else {
|
||||
posX1 = e.clientX;
|
||||
document.onmouseup = dragEnd;
|
||||
document.onmousemove = dragAction;
|
||||
}
|
||||
}
|
||||
function dragAction (e) {
|
||||
e = e || window.event;
|
||||
// if (e.type == 'touchstart') {
|
||||
// posX1 = e.touches[0].clientX;
|
||||
// } else {
|
||||
// posX1 = e.clientX;
|
||||
// document.onmouseup = dragEnd;
|
||||
// document.onmousemove = dragAction;
|
||||
// }
|
||||
// }
|
||||
// function dragAction (e) {
|
||||
// e = e || window.event;
|
||||
|
||||
if (e.type == 'touchmove') {
|
||||
posX2 = posX1 - e.touches[0].clientX;
|
||||
posX1 = e.touches[0].clientX;
|
||||
} else {
|
||||
posX2 = posX1 - e.clientX;
|
||||
posX1 = e.clientX;
|
||||
}
|
||||
items.style.left = (items.offsetLeft - posX2) + "px";
|
||||
}
|
||||
// if (e.type == 'touchmove') {
|
||||
// posX2 = posX1 - e.touches[0].clientX;
|
||||
// posX1 = e.touches[0].clientX;
|
||||
// } else {
|
||||
// posX2 = posX1 - e.clientX;
|
||||
// posX1 = e.clientX;
|
||||
// }
|
||||
// items.style.left = (items.offsetLeft - posX2) + "px";
|
||||
// }
|
||||
|
||||
function dragEnd (e) {
|
||||
posFinal = items.offsetLeft;
|
||||
if (posFinal - posInitial < -threshold) {
|
||||
shiftSlide(1, 'drag');
|
||||
} else if (posFinal - posInitial > threshold) {
|
||||
shiftSlide(-1, 'drag');
|
||||
} else {
|
||||
items.style.left = (posInitial) + "px";
|
||||
}
|
||||
document.onmouseup = null;
|
||||
document.onmousemove = null;
|
||||
}
|
||||
// function dragEnd (e) {
|
||||
// posFinal = items.offsetLeft;
|
||||
// if (posFinal - posInitial < -threshold) {
|
||||
// shiftSlide(1, 'drag');
|
||||
// } else if (posFinal - posInitial > threshold) {
|
||||
// shiftSlide(-1, 'drag');
|
||||
// } else {
|
||||
// items.style.left = (posInitial) + "px";
|
||||
// }
|
||||
// document.onmouseup = null;
|
||||
// document.onmousemove = null;
|
||||
// }
|
||||
|
||||
function shiftSlide(dir, action) {
|
||||
items.classList.add('shifting');
|
||||
// function shiftSlide(dir, action) {
|
||||
// items.classList.add('shifting');
|
||||
|
||||
if (allowShift) {
|
||||
if (!action) { posInitial = items.offsetLeft; }
|
||||
if (dir == 1) {
|
||||
items.style.left = (posInitial - slideSize) + "px";
|
||||
index++;
|
||||
} else if (dir == -1) {
|
||||
items.style.left = (posInitial + slideSize) + "px";
|
||||
index--;
|
||||
}
|
||||
};
|
||||
// if (allowShift) {
|
||||
// if (!action) { posInitial = items.offsetLeft; }
|
||||
// if (dir == 1) {
|
||||
// items.style.left = (posInitial - slideSize) + "px";
|
||||
// index++;
|
||||
// } else if (dir == -1) {
|
||||
// items.style.left = (posInitial + slideSize) + "px";
|
||||
// index--;
|
||||
// }
|
||||
// };
|
||||
|
||||
allowShift = false;
|
||||
}
|
||||
// allowShift = false;
|
||||
// }
|
||||
|
||||
function checkIndex (){
|
||||
items.classList.remove('shifting');
|
||||
if (index == -1) {
|
||||
items.style.left = -(slidesLength * slideSize) + "px";
|
||||
index = slidesLength - 1;
|
||||
}
|
||||
if (index == slidesLength) {
|
||||
items.style.left = -(1 * slideSize) + "px";
|
||||
index = 0;
|
||||
}
|
||||
// function checkIndex (){
|
||||
// items.classList.remove('shifting');
|
||||
// if (index == -1) {
|
||||
// items.style.left = -(slidesLength * slideSize) + "px";
|
||||
// index = slidesLength - 1;
|
||||
// }
|
||||
// if (index == slidesLength) {
|
||||
// items.style.left = -(1 * slideSize) + "px";
|
||||
// index = 0;
|
||||
// }
|
||||
|
||||
allowShift = true;
|
||||
}
|
||||
}
|
||||
// allowShift = true;
|
||||
// }
|
||||
// }
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
@ -561,4 +561,4 @@ var options = {
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart"), options);
|
||||
chart.re
|
||||
chart.render();
|
||||
Loading…
Reference in New Issue
Block a user