Initial Commit
|
@ -0,0 +1,9 @@
|
||||||
|
Authors
|
||||||
|
-------
|
||||||
|
* `David Ghedini`_
|
||||||
|
* `Kaloyan Petrov`_
|
||||||
|
* `Cited, Inc`_
|
||||||
|
|
||||||
|
.. _`David Ghedini`: https://github.com/DavidGhedini
|
||||||
|
.. _`Kaloyan Petrov`: https://github.com/kaloyan13
|
||||||
|
.. _`Cited, Inc`: https://www.citedcorp.com
|
|
@ -0,0 +1,30 @@
|
||||||
|
# Contributing
|
||||||
|
|
||||||
|
## Issues
|
||||||
|
|
||||||
|
If you've found a bug, let us know about it.
|
||||||
|
|
||||||
|
## Pull Requests
|
||||||
|
|
||||||
|
For all cases, you should have your own fork of the repo.
|
||||||
|
|
||||||
|
To submit a pull request for a **new feature**:
|
||||||
|
|
||||||
|
1. Run the tests. Every pull request for a new feature should have an accompanying unit test and docs changes. See the `README.md` in the `tests/` and `docs/` directories for details.
|
||||||
|
2. Create a new branch off of the `master` branch for your feature. This is particularly helpful when you want to submit multiple pull requests.
|
||||||
|
3. Add a test (or multiple tests) for your feature. Again, see `tests/README.md`.
|
||||||
|
4. Add your new feature, making the test pass.
|
||||||
|
5. Push to your fork and submit the pull request!
|
||||||
|
|
||||||
|
To submit a **bug fix**:
|
||||||
|
|
||||||
|
1. Create a new branch off of the `master` branch.
|
||||||
|
2. Add a test that demonstrates the bug.
|
||||||
|
3. Make the test pass.
|
||||||
|
4. Push to your fork and submit the pull request!
|
||||||
|
|
||||||
|
To submit a **documentation fix**:
|
||||||
|
|
||||||
|
1. Create a new branch off of the `master` branch.
|
||||||
|
2. Add your documentation fixes (no tests required).
|
||||||
|
3. Push to your fork and submit the pull request!
|
|
@ -0,0 +1,4 @@
|
||||||
|
POSTGRES_USER=tile
|
||||||
|
POSTGRES_PASSWORD=123456
|
||||||
|
POSTGRES_DB=gis
|
||||||
|
PBF_URL=https://download.geofabrik.de/europe/andorra-latest.osm.pbf
|
|
@ -0,0 +1,26 @@
|
||||||
|
# OpenTileServer Docker
|
||||||
|
|
||||||
|
# Info
|
||||||
|
Dockerized OpenTileServer
|
||||||
|
|
||||||
|
First build the containers, then start PostgreSQL, renderd, and Apache.
|
||||||
|
|
||||||
|
# Install
|
||||||
|
Clone OpenTileServer-Docker and copy docker-compose and api-gateway configuration template:
|
||||||
|
|
||||||
|
git clone https://github.com/AcuGIS/OpenTileServer.git
|
||||||
|
cd OpenTileServer/Docker
|
||||||
|
docker-compose build
|
||||||
|
docker-compose up -d
|
||||||
|
|
||||||
|
# Add PBF File
|
||||||
|
|
||||||
|
$ docker images (to get container id)
|
||||||
|
$ docker exec -it ${CONTAINER_ID} bash
|
||||||
|
$ root@${CONTAINER_ID}:/home/tile# ./osm_load.sh 'https://download.geofabrik.de/europe/andorra-latest.osm.pbf'
|
||||||
|
$ docker-compose restart tile
|
||||||
|
|
||||||
|
You can access PostgreSQL on localhost:5432 and Apache on localhost:8080
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,30 @@
|
||||||
|
version: '3'
|
||||||
|
|
||||||
|
services:
|
||||||
|
pg:
|
||||||
|
image: acugis/pg:latest
|
||||||
|
env_file:
|
||||||
|
- .env
|
||||||
|
volumes:
|
||||||
|
- ./vol/pg:/var/lib/postgresql/data
|
||||||
|
restart: always
|
||||||
|
hostname: pg
|
||||||
|
ports:
|
||||||
|
- 5432:5432
|
||||||
|
healthcheck:
|
||||||
|
test: pg_isready -h pg -U ${POSTGRES_USER}
|
||||||
|
interval: 60s
|
||||||
|
retries: 2
|
||||||
|
timeout: 10s
|
||||||
|
|
||||||
|
tile:
|
||||||
|
env_file:
|
||||||
|
- .env
|
||||||
|
image: acugis/opentileserver:latest
|
||||||
|
volumes:
|
||||||
|
- ./vol/tiles:/var/cache/renderd/tiles
|
||||||
|
ports:
|
||||||
|
- 80:80
|
||||||
|
depends_on:
|
||||||
|
- "pg"
|
||||||
|
privileged: true
|
|
@ -0,0 +1,2 @@
|
||||||
|
FROM postgis/postgis:14-3.2
|
||||||
|
COPY ./hstore.sql /docker-entrypoint-initdb.d
|
|
@ -0,0 +1 @@
|
||||||
|
CREATE EXTENSION hstore;
|
|
@ -0,0 +1,16 @@
|
||||||
|
<VirtualHost _default_:80>
|
||||||
|
ServerAdmin webmaster@localhost
|
||||||
|
ServerName localhost
|
||||||
|
|
||||||
|
DocumentRoot /var/www/html
|
||||||
|
<Directory /var/www/html>
|
||||||
|
Options Indexes FollowSymLinks
|
||||||
|
AllowOverride None
|
||||||
|
Require all granted
|
||||||
|
</Directory>
|
||||||
|
|
||||||
|
Include /etc/apache2/conf-enabled/renderd.conf
|
||||||
|
|
||||||
|
ErrorLog ${APACHE_LOG_DIR}/error.log
|
||||||
|
CustomLog ${APACHE_LOG_DIR}/access.log combined
|
||||||
|
</VirtualHost>
|
|
@ -0,0 +1,117 @@
|
||||||
|
FROM ubuntu:20.04
|
||||||
|
LABEL maintainer="AcuGIS <hello@citedcorp.com>"
|
||||||
|
SHELL ["/bin/bash", "-c"]
|
||||||
|
|
||||||
|
ENV WORKDIR_OSM=/var/tmp/.osmosis
|
||||||
|
ENV OSM_STYLE_XML='/usr/local/share/maps/style/OSMBright/OSMBright.xml'
|
||||||
|
|
||||||
|
ARG DEBIAN_FRONTEND=noninteractive
|
||||||
|
ARG POSTGRES_DB
|
||||||
|
ARG POSTGRES_USER
|
||||||
|
ARG POSTGRES_PASSWORD
|
||||||
|
ARG PBF_URL
|
||||||
|
|
||||||
|
# Install packages needed for building
|
||||||
|
# install modtile/renderd
|
||||||
|
ADD https://github.com/openstreetmap/mod_tile/archive/refs/tags/0.6.1.zip /tmp/mod_tile-0.6.1.zip
|
||||||
|
COPY build_modtile.sh /tmp/build_modtile.sh
|
||||||
|
RUN bash /tmp/build_modtile.sh ${OSM_STYLE_XML} && rm /tmp/build_modtile.sh
|
||||||
|
|
||||||
|
# install carto
|
||||||
|
RUN apt-get -y install npm nodejs && \
|
||||||
|
npm install -g carto
|
||||||
|
|
||||||
|
# install Bright stylesheet
|
||||||
|
ADD https://github.com/mapbox/osm-bright/archive/master.zip /tmp/master.zip
|
||||||
|
RUN mkdir -p /usr/local/share/maps/style
|
||||||
|
WORKDIR /usr/local/share/maps/style
|
||||||
|
RUN unzip /tmp/master.zip && rm -f /tmp/master.zip && \
|
||||||
|
mkdir -p osm-bright-master/shp
|
||||||
|
|
||||||
|
# TODO: do we need the .shp files (1.2GB), after indexing ?
|
||||||
|
COPY index_polygons.sh /tmp/index_polygons.sh
|
||||||
|
RUN bash /tmp/index_polygons.sh && rm -f /tmp/index_polygons.sh
|
||||||
|
|
||||||
|
# Configuring OSM Bright
|
||||||
|
COPY fix_mml.sh /tmp/fix_mml.sh
|
||||||
|
ADD http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_populated_places.zip /tmp/ne_10m_populated_places.zip
|
||||||
|
RUN unzip /tmp/ne_10m_populated_places.zip && rm -f /tmp/ne_10m_populated_places.zip && \
|
||||||
|
mkdir -p osm-bright-master/shp/ne_10m_populated_places && \
|
||||||
|
mv ne_10m_populated_places.* osm-bright-master/shp/ne_10m_populated_places/ && \
|
||||||
|
bash /tmp/fix_mml.sh && rm -f /tmp/fix_mml.sh
|
||||||
|
|
||||||
|
# Compiling the stylesheet
|
||||||
|
WORKDIR /usr/local/share/maps/style/osm-bright-master
|
||||||
|
RUN apt-get -y install python2 && \
|
||||||
|
ln -s /usr/bin/python2 /usr/bin/python && \
|
||||||
|
mv configure.py.sample configure.py && \
|
||||||
|
sed -i.save 's|config\["path"\].*|config\["path"\] = path.expanduser("/usr/local/share/maps/style")|' configure.py && \
|
||||||
|
sed -i.save "s|config\[\"postgis\"\]\[\"host\"\].*|config\[\"postgis\"\]\[\"host\"\]=\"pg\"|" configure.py && \
|
||||||
|
sed -i.save "s|config\[\"postgis\"\]\[\"dbname\"\].*|config\[\"postgis\"\]\[\"dbname\"\]=\"${POSTGRES_DB}\"|" configure.py && \
|
||||||
|
sed -i.save "s|config\[\"postgis\"\]\[\"user\"\].*|config\[\"postgis\"\]\[\"user\"\]=\"${POSTGRES_USER}\"|" configure.py && \
|
||||||
|
sed -i.save "s|config\[\"postgis\"\]\[\"password\"\].*|config\[\"postgis\"\]\[\"password\"\]=\"${POSTGRES_PASSWORD}\"|" configure.py && \
|
||||||
|
./configure.py && \
|
||||||
|
./make.py && \
|
||||||
|
cd ../OSMBright/ && \
|
||||||
|
carto project.mml > OSMBright.xml
|
||||||
|
|
||||||
|
# Configure webserver
|
||||||
|
COPY mod_tile.load /etc/apache2/mods-enabled/mod_tile.load
|
||||||
|
COPY renderd.conf /etc/apache2/conf-available/renderd.conf
|
||||||
|
COPY 000-default.conf /etc/apache2/sites-available/000-default.conf
|
||||||
|
RUN a2enconf renderd && a2ensite 000-default
|
||||||
|
|
||||||
|
# Configure webpages
|
||||||
|
ADD https://github.com/AcuGIS/OpenTileServer/archive/refs/heads/master.zip /tmp/master.zip
|
||||||
|
RUN unzip /tmp/master.zip && \
|
||||||
|
mv /tmp/OpenTileServer-master/app/* /var/www/html/ && \
|
||||||
|
rm -rf /tmp/master.zip && /tmp/OpenTileServer-master
|
||||||
|
|
||||||
|
COPY latlong.py /tmp/latlong.py
|
||||||
|
RUN LOC_NAME=$(echo ${##*/} | sed 's/\(.*\)-latest.*/\1/') \
|
||||||
|
&& sed -i.save "s|localhost|$(hostname -I | tr -d ' ')|" /var/www/html/leaflet-example.html \
|
||||||
|
&& apt-get -y install python3-requests \
|
||||||
|
&& LOC_LATLONG=$(python3 /tmp/latlong.py "${LOC_NAME}") \
|
||||||
|
&& sed -i.save "s/\.setView(\[[0-9]\+\.[0-9]\+,[ \t]*-\?[0-9]\+\.[0-9]\+/.setView([${LOC_LATLONG}/" /var/www/html/leaflet-example.html \
|
||||||
|
&& sed -i.save "s/L\.marker(\[[0-9]\+\.[0-9]\+,[ \t]*-\?[0-9]\+\.[0-9]\+/L.marker([${LOC_LATLONG}/" /var/www/html/leaflet-example.html \
|
||||||
|
&& rm -f /tmp/latlong.py \
|
||||||
|
&& chown -R www-data:www-data /var/www/
|
||||||
|
|
||||||
|
# install osmosis
|
||||||
|
COPY osm_update.sh /etc/cron.daily/osm_update
|
||||||
|
RUN apt-get -y install osmosis && \
|
||||||
|
echo 'WORKDIR_OSM=/var/tmp/.osmosis' >> /etc/environment && \
|
||||||
|
mkdir -p "${WORKDIR_OSM}" && \
|
||||||
|
osmosis --read-replication-interval-init workingDirectory=${WORKDIR_OSM} && \
|
||||||
|
STATE_URL="https://replicate-sequences.osm.mazdermind.de/?$(date -u +"%Y-%m-%dT%TZ")&stream=day" && \
|
||||||
|
wget --no-check-certificate -O${WORKDIR_OSM}/state.txt ${STATE_URL} && \
|
||||||
|
UPDATE_URL="$(echo ${PBF_URL} | sed 's/latest.osm.pbf/updates/')" && \
|
||||||
|
sed -i.save "s|#\?baseUrl=.*|baseUrl=${UPDATE_URL}|" ${WORKDIR_OSM}/configuration.txt && \
|
||||||
|
chmod +x /etc/cron.daily/osm_update
|
||||||
|
|
||||||
|
# install osm2pgsql
|
||||||
|
RUN apt-get -y --no-install-recommends install osm2pgsql
|
||||||
|
|
||||||
|
# Cleanup
|
||||||
|
RUN apt-get clean \
|
||||||
|
&& apt-get -y autoclean \
|
||||||
|
&& apt-get -y autoremove \
|
||||||
|
&& rm -rf /var/lib/apt/lists/* \
|
||||||
|
&& rm -rf /usr/share/man/* \
|
||||||
|
&& rm -rf /usr/share/doc/*
|
||||||
|
|
||||||
|
RUN useradd -m ${POSTGRES_USER} \
|
||||||
|
&& echo ${POSTGRES_USER}:${POSTGRES_PASSWORD} | chpasswd \
|
||||||
|
&& echo "pg:5432:${POSTGRES_DB}:${POSTGRES_USER}:${POSTGRES_PASSWORD}" > /home/${POSTGRES_USER}/.pgpass \
|
||||||
|
&& chown ${POSTGRES_USER}:${POSTGRES_USER} /home/${POSTGRES_USER}/.pgpass
|
||||||
|
|
||||||
|
COPY entrypoint.sh /entrypoint.sh
|
||||||
|
COPY osm_load.sh /home/${POSTGRES_USER}/osm_load.sh
|
||||||
|
RUN chmod +x /entrypoint.sh /home/${POSTGRES_USER}/osm_load.sh
|
||||||
|
|
||||||
|
WORKDIR /home/${POSTGRES_USER}
|
||||||
|
#USER ${POSTGRES_USER}
|
||||||
|
EXPOSE 80/tcp
|
||||||
|
#EXPOSE 443/tcp
|
||||||
|
|
||||||
|
CMD ["/entrypoint.sh"]
|
|
@ -0,0 +1,42 @@
|
||||||
|
#!/bin/bash -e
|
||||||
|
|
||||||
|
OSM_STYLE_XML="${1}"
|
||||||
|
|
||||||
|
sed -i 's/^#\s*\(deb.*universe\)$/\1/g' /etc/apt/sources.list
|
||||||
|
apt-get -y update
|
||||||
|
apt-get -y install apt-utils
|
||||||
|
|
||||||
|
apt-get -y install tar unzip wget bzip2 \
|
||||||
|
python3-mapnik libmapnik3.0 mapnik-utils \
|
||||||
|
ttf-unifont fonts-arphic-ukai fonts-arphic-uming fonts-thai-tlwg \
|
||||||
|
apache2 postgresql-client lua-rrd libgeotiff5 build-essential autoconf \
|
||||||
|
apache2-dev libcairo2-dev libcurl4-gnutls-dev libglib2.0-dev \
|
||||||
|
libiniparser-dev libmapnik-dev libmemcached-dev librados-dev
|
||||||
|
|
||||||
|
unzip /tmp/mod_tile-0.6.1.zip && rm -f /tmp/mod_tile-0.6.1.zip
|
||||||
|
pushd mod_tile-0.6.1
|
||||||
|
./autogen.sh && ./configure
|
||||||
|
make && make install && make install-mod_tile
|
||||||
|
popd
|
||||||
|
|
||||||
|
rm -rf mod_tile-0.6.1
|
||||||
|
#apt-get -y remove build-essential autoconf \
|
||||||
|
# apache2-dev libcairo2-dev libcurl4-gnutls-dev libglib2.0-dev \
|
||||||
|
# libiniparser-dev libmapnik-dev libmemcached-dev librados-dev
|
||||||
|
|
||||||
|
ldconfig
|
||||||
|
|
||||||
|
mkdir -p /var/run/renderd /var/cache/renderd/tiles
|
||||||
|
chown www-data:www-data /var/run/renderd /var/cache/renderd/tiles
|
||||||
|
|
||||||
|
MAPNIK_PLUG=$(mapnik-config --input-plugins)
|
||||||
|
|
||||||
|
sed -i.save "s|^plugins_dir=.*|plugins_dir=${MAPNIK_PLUG}|" /usr/local/etc/renderd.conf
|
||||||
|
|
||||||
|
cat >> /usr/local/etc/renderd.conf << CAT_EOF
|
||||||
|
[default]
|
||||||
|
URI=/osm_tiles
|
||||||
|
XML=${OSM_STYLE_XML}
|
||||||
|
HOST=localhost
|
||||||
|
TILESIZE=256
|
||||||
|
CAT_EOF
|
|
@ -0,0 +1,14 @@
|
||||||
|
#!/bin/bash -e
|
||||||
|
|
||||||
|
export PGPASSWORD="${POSTGRES_PASSWORD}"
|
||||||
|
export PGUSER=${POSTGRES_USER}
|
||||||
|
|
||||||
|
# wait for PG to become ready
|
||||||
|
while [ $(pg_isready -h pg -d ${POSTGRES_DB} -U ${POSTGRES_USER} | grep -c 'accepting') -eq 0 ]; do
|
||||||
|
sleep 1;
|
||||||
|
done
|
||||||
|
|
||||||
|
/etc/init.d/apache2 start
|
||||||
|
|
||||||
|
# run apache on foreground
|
||||||
|
/usr/local/bin/renderd -f -c /usr/local/etc/renderd.conf
|
|
@ -0,0 +1,16 @@
|
||||||
|
if [ $(grep -c '.zip' /usr/local/share/maps/style/osm-bright-master/osm-bright/osm-bright.osm2pgsql.mml) -ne 0 ]; then #if we have zip in mml
|
||||||
|
cd /usr/local/share/maps/style/osm-bright-master
|
||||||
|
cp osm-bright/osm-bright.osm2pgsql.mml osm-bright/osm-bright.osm2pgsql.mml.orig
|
||||||
|
sed -i.save 's|.*simplified-land-polygons-complete-3857.zip",|"file":"/usr/local/share/maps/style/osm-bright-master/shp/simplified-land-polygons-complete-3857/simplified_land_polygons.shp",\n"type": "shape",|' osm-bright/osm-bright.osm2pgsql.mml
|
||||||
|
sed -i.save 's|.*land-polygons-split-3857.zip"|"file":"/usr/local/share/maps/style/osm-bright-master/shp/land-polygons-split-3857/land_polygons.shp",\n"type":"shape"|' osm-bright/osm-bright.osm2pgsql.mml
|
||||||
|
sed -i.save 's|.*10m-populated-places-simple.zip"|"file":"/usr/local/share/maps/style/osm-bright-master/shp/ne_10m_populated_places/ne_10m_populated_places.shp",\n"type": "shape"|' osm-bright/osm-bright.osm2pgsql.mml
|
||||||
|
|
||||||
|
sed -i.save '/name":[ \t]*"ne_places"/a"srs": "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs"' osm-bright/osm-bright.osm2pgsql.mml
|
||||||
|
#Delete
|
||||||
|
#"srs": "",
|
||||||
|
# "srs_name": "",
|
||||||
|
LINE_FROM=$(grep -n '"srs": "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs"' osm-bright/osm-bright.osm2pgsql.mml | cut -f1 -d':')
|
||||||
|
let LINE_FROM=LINE_FROM+1
|
||||||
|
let LINE_TO=LINE_FROM+1
|
||||||
|
sed -i.save "${LINE_FROM},${LINE_TO}d" osm-bright/osm-bright.osm2pgsql.mml
|
||||||
|
fi
|
|
@ -0,0 +1,9 @@
|
||||||
|
for shp in 'land-polygons-split-3857' 'simplified-land-polygons-complete-3857'; do
|
||||||
|
wget -nv --no-check-certificate https://osmdata.openstreetmap.de/download/${shp}.zip
|
||||||
|
unzip ${shp}.zip
|
||||||
|
rm -f ${shp}.zip
|
||||||
|
mv ${shp}/ osm-bright-master/shp/
|
||||||
|
pushd osm-bright-master/shp/${shp}/
|
||||||
|
shapeindex *.shp
|
||||||
|
popd
|
||||||
|
done
|
|
@ -0,0 +1,10 @@
|
||||||
|
import sys
|
||||||
|
import requests
|
||||||
|
import re
|
||||||
|
|
||||||
|
place = sys.argv[1]
|
||||||
|
url = 'https://www.mapdevelopers.com/geocode_tool.php?address=' + place
|
||||||
|
response = requests.get(url)
|
||||||
|
if response.status_code == 200:
|
||||||
|
res = re.findall(r"geocode_tool\.php\?lat=([0-9\-\.]+)&lng=([0-9\-\.]+)", str(response.content));
|
||||||
|
print(res[0][0] + "," + res[0][1])
|
|
@ -0,0 +1 @@
|
||||||
|
LoadModule tile_module /usr/lib/apache2/modules/mod_tile.so
|
|
@ -0,0 +1,17 @@
|
||||||
|
#!/bin/bash -e
|
||||||
|
export PGPASSWORD="${POSTGRES_PASSWORD}"
|
||||||
|
export PGUSER=${POSTGRES_USER}
|
||||||
|
|
||||||
|
PBF_URL="${1}"
|
||||||
|
|
||||||
|
NP=$(grep -c 'model name' /proc/cpuinfo)
|
||||||
|
let C_MEM=$(free -m | grep -i 'mem:' | sed 's/[ \t]\+/ /g' | cut -f7 -d' ')-200
|
||||||
|
|
||||||
|
wget --no-check-certificate "${PBF_URL}"
|
||||||
|
PBF_FILE="${PBF_URL##*/}"
|
||||||
|
osm2pgsql --slim -H pg -d ${POSTGRES_DB} --number-processes ${NP} --hstore -C ${C_MEM} "${PBF_FILE}"
|
||||||
|
rm -rf "${PBF_FILE}"
|
||||||
|
|
||||||
|
# update osmosis URL
|
||||||
|
UPDATE_URL="$(echo ${PBF_URL} | sed 's/latest.osm.pbf/updates/')"
|
||||||
|
sed -i.save "s|#\?baseUrl=.*|baseUrl=${UPDATE_URL}|" ${WORKDIR_OSM}/configuration.txt
|
|
@ -0,0 +1,8 @@
|
||||||
|
#!/bin/bash
|
||||||
|
#export WORKDIR_OSM=/home/${OSM_USER}/.osmosis
|
||||||
|
export PGPASSWORD="${POSTGRES_PASSWORD}"
|
||||||
|
NP=$(grep -c 'model name' /proc/cpuinfo)
|
||||||
|
osm2pgsql_OPTS="--slim -d ${POSTGRES_DB} --number-processes ${NP} --hstore"
|
||||||
|
|
||||||
|
osmosis --read-replication-interval workingDirectory=${WORKDIR_OSM} --simplify-change --write-xml-change /tmp/changes.osc.gz
|
||||||
|
sudo -u ${POSTGRES_USER} osm2pgsql --append ${osm2pgsql_OPTS} /tmp/changes.osc.gz
|
|
@ -0,0 +1,6 @@
|
||||||
|
LoadTileConfigFile /usr/local/etc/renderd.conf
|
||||||
|
ModTileRenderdSocketName /var/run/renderd/renderd.sock
|
||||||
|
# Timeout before giving up for a tile to be rendered
|
||||||
|
ModTileRequestTimeout 0
|
||||||
|
# Timeout before giving up for a tile to be rendered that is otherwise missing
|
||||||
|
ModTileMissingRequestTimeout 30
|
126
README.md
|
@ -1,2 +1,126 @@
|
||||||
# OpenTileServer
|
# OpenStreetMap Server
|
||||||
|
|
||||||
|
## Build an OpenStreetMap Server
|
||||||
|
|
||||||
|
![OpenTileServer](docs/OpenStreetMap-Server.png)
|
||||||
|
|
||||||
|
|
||||||
|
* Project page: https://www.acugis.com/opentileserver
|
||||||
|
* Documentation: https://www.acugis.com/opentileserver/docs
|
||||||
|
|
||||||
|
[![Documentation Status](https://readthedocs.org/projects/opentileserver/badge/?version=latest)](https://opentileserver.docs.acugis.com/en/latest/?badge=latest)
|
||||||
|
|
||||||
|
Installation Options
|
||||||
|
|
||||||
|
### 1. [Script](https://github.com/AcuGIS/OpenTileServer/blob/master/README.md#1-script)
|
||||||
|
### 2. [Docker Compose](https://github.com/AcuGIS/OpenTileServer/blob/master/README.md#2-install-using-docker-compose)
|
||||||
|
|
||||||
|
This script is for building a basic tile server with OpenStreetMap data.
|
||||||
|
|
||||||
|
## 1. Install Using Script
|
||||||
|
|
||||||
|
For demos to work, be sure your hostname is set properly.
|
||||||
|
|
||||||
|
On a clean Ubuntu 22 install.
|
||||||
|
|
||||||
|
1. Get the script and make it executable:
|
||||||
|
|
||||||
|
wget https://raw.githubusercontent.com/AcuGIS/OpenTileServer/master/opentileserver-ubuntu-22.sh && chmod +x opentileserver-ubuntu-22.sh
|
||||||
|
|
||||||
|
2. If using a non-Latin alphabet, ucomment line 24 below:
|
||||||
|
|
||||||
|
export LC_ALL=C
|
||||||
|
|
||||||
|
3. Run the script
|
||||||
|
|
||||||
|
### Running the script:
|
||||||
|
|
||||||
|
./opentileserver-ubuntu-22.sh [web|ssl] [bright|carto] pbf_url
|
||||||
|
|
||||||
|
[web|ssl]: 'web' for http and 'ssl' for https.
|
||||||
|
|
||||||
|
[bright|carto]: 'carto' for openstreetmap-carto or 'bright' for openstreetmap-bright
|
||||||
|
|
||||||
|
pbf_url: Complete PBF url from GeoFabrik (or other source)
|
||||||
|
|
||||||
|
|
||||||
|
### Examples:
|
||||||
|
|
||||||
|
Load Delaware data with openstreetmap-carto style and no SSL:
|
||||||
|
|
||||||
|
./opentileserver-ubuntu-22.sh web carto http://download.geofabrik.de/north-america/us/delaware-latest.osm.pbf
|
||||||
|
|
||||||
|
Load Bulgaria data with openstreetmap-bright style and SSL:
|
||||||
|
|
||||||
|
./opentileserver-ubuntu-22.sh http://download.geofabrik.de/europe/bulgaria-latest.osm.pbf bright
|
||||||
|
|
||||||
|
Load South America data with openstreetmap-carto style and SSL:
|
||||||
|
|
||||||
|
./opentileserver-ubuntu-22.sh ssl carto http://download.geofabrik.de/south-america-latest.osm.pbf
|
||||||
|
|
||||||
|
|
||||||
|
### Using SSL:
|
||||||
|
|
||||||
|
If you select the ssl option and wish to use LetsEncrypt, be sure to do the following:
|
||||||
|
|
||||||
|
1. Check hostname is set properly. You can set the hostname using hostnamectl as below:
|
||||||
|
|
||||||
|
hostnamectl set-hostname domain.com
|
||||||
|
|
||||||
|
2. Run the script, which will provision a dummy SSL certificate.
|
||||||
|
|
||||||
|
3. Once script completes, enable Python Certbot Apache plugin:
|
||||||
|
|
||||||
|
apt-get -y install python3-certbot-apache
|
||||||
|
|
||||||
|
4. Request a certificate using below and
|
||||||
|
|
||||||
|
certbot --apache --agree-tos --email hostmaster@domain.com --no-eff-email -d domain.com
|
||||||
|
|
||||||
|
5. select the option "2: Redirect - Make all requests redirect to secure HTTPS access"
|
||||||
|
|
||||||
|
6. Restart Apache
|
||||||
|
|
||||||
|
|
||||||
|
## 2. Install Using Docker Compose
|
||||||
|
|
||||||
|
Dockerized OpenTileServer
|
||||||
|
|
||||||
|
First build the containers, then start PostgreSQL, renderd, and Apache.
|
||||||
|
|
||||||
|
### Run
|
||||||
|
Clone OpenTileServer and change to the OpenTileServer/Docker directoy:
|
||||||
|
|
||||||
|
git clone https://github.com/AcuGIS/OpenTileServer.git
|
||||||
|
cd OpenTileServer/Docker
|
||||||
|
docker compose pull
|
||||||
|
docker compose up
|
||||||
|
|
||||||
|
### Add PBF File
|
||||||
|
|
||||||
|
$ docker ps (to get container id)
|
||||||
|
$ docker exec -it ${CONTAINER_ID} bash
|
||||||
|
$ root@${CONTAINER_ID}:/home/tile# ./osm_load.sh 'https://download.geofabrik.de/europe/andorra-latest.osm.pbf'
|
||||||
|
$ docker compose restart
|
||||||
|
|
||||||
|
You can access PostgreSQL on 5432 and Apache 80
|
||||||
|
|
||||||
|
|
||||||
|
## Welcome Page
|
||||||
|
|
||||||
|
Once installation completes, navigate to the IP or hostname of your server.
|
||||||
|
|
||||||
|
You should see a page as below:
|
||||||
|
|
||||||
|
![OpenTileServer](docs/OpenStreetMap-Server.png)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Click on both the OpenLayer and Leaflet Examples and check your installation is rendering
|
||||||
|
|
||||||
|
[Produced by AcuGIS. We Make GIS Simple](https://www.acugis.com)
|
||||||
|
|
||||||
|
[Cited, Inc. Wilmington, Delaware](https://citedcorp.com)
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,885 @@
|
||||||
|
/* Fonts */
|
||||||
|
:root {
|
||||||
|
--font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
--font-primary: "Montserrat", sans-serif;
|
||||||
|
--font-secondary: "Poppins", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Colors */
|
||||||
|
:root {
|
||||||
|
--color-default: #222222;
|
||||||
|
--color-primary: #008374;
|
||||||
|
--color-secondary: #f85a40;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth scroll behavior */
|
||||||
|
:root {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-default);
|
||||||
|
color: var(--color-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #00b6a1;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: 60px 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sections-bg {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header h2:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 50px;
|
||||||
|
height: 3px;
|
||||||
|
background: var(--color-primary);
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
color: #6f6f6f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs .page-header {
|
||||||
|
padding: 60px 0 60px 0;
|
||||||
|
min-height: 20vh;
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs .page-header h2 {
|
||||||
|
font-size: 56px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #fff;
|
||||||
|
font-family: var(--font-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs .page-header p {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs nav {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs nav ol {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs nav ol a {
|
||||||
|
color: var(--color-primary);
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs nav ol a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs nav ol li+li {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs nav ol li+li::before {
|
||||||
|
display: inline-block;
|
||||||
|
padding-right: 10px;
|
||||||
|
color: var(--color-secondary);
|
||||||
|
content: "/";
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-top {
|
||||||
|
position: fixed;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
right: 15px;
|
||||||
|
bottom: -15px;
|
||||||
|
z-index: 99999;
|
||||||
|
background: var(--color-secondary);
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 50px;
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-top i {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-top:hover {
|
||||||
|
background: rgba(248, 90, 64, 0.8);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-top.active {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preloader {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 999999;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
|
transition: all 0.6s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preloader:before {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
top: calc(50% - 30px);
|
||||||
|
left: calc(50% - 30px);
|
||||||
|
border: 6px solid #fff;
|
||||||
|
border-color: var(--color-primary) transparent var(--color-primary) transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
animation: animate-preloader 1.5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animate-preloader {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
[data-aos-delay] {
|
||||||
|
transition-delay: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
background: #00796b;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: all 0.5s;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .contact-info i {
|
||||||
|
font-style: normal;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .contact-info i a,
|
||||||
|
.topbar .contact-info i span {
|
||||||
|
padding-left: 5px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575px) {
|
||||||
|
|
||||||
|
.topbar .contact-info i a,
|
||||||
|
.topbar .contact-info i span {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .contact-info i a {
|
||||||
|
line-height: 0;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .contact-info i a:hover {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .social-links a {
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
line-height: 0;
|
||||||
|
transition: 0.3s;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .social-links a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
transition: all 0.5s;
|
||||||
|
z-index: 997;
|
||||||
|
height: 90px;
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header.sticked {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 70px;
|
||||||
|
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .logo img {
|
||||||
|
max-height: 40px;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .logo h1 {
|
||||||
|
font-size: 30px;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.8px;
|
||||||
|
color: #fff;
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .logo h1 span {
|
||||||
|
color: #f96f59;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticked-header-offset {
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
scroll-margin-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1280px) {
|
||||||
|
.navbar {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar li {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar>ul>li {
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 10px 0 10px 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a,
|
||||||
|
.navbar a:focus {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 3px;
|
||||||
|
font-family: var(--font-secondary);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: 0.3s;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a i,
|
||||||
|
.navbar a:focus i {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 0;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar>ul>li>a:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
bottom: -6px;
|
||||||
|
left: 0;
|
||||||
|
background-color: var(--color-secondary);
|
||||||
|
visibility: hidden;
|
||||||
|
width: 0px;
|
||||||
|
transition: all 0.3s ease-in-out 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a:hover:before,
|
||||||
|
.navbar li:hover>a:before,
|
||||||
|
.navbar .active:before {
|
||||||
|
visibility: visible;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a:hover,
|
||||||
|
.navbar .active,
|
||||||
|
.navbar .active:focus,
|
||||||
|
.navbar li:hover>a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown ul {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 28px;
|
||||||
|
top: calc(100% + 30px);
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
z-index: 99;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
|
||||||
|
transition: 0.3s;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown ul li {
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown ul a {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 15px;
|
||||||
|
text-transform: none;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #006a5d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown ul a i {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown ul a:hover,
|
||||||
|
.navbar .dropdown ul .active:hover,
|
||||||
|
.navbar .dropdown ul li:hover>a {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown:hover>ul {
|
||||||
|
opacity: 1;
|
||||||
|
top: 100%;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown .dropdown ul {
|
||||||
|
top: 0;
|
||||||
|
left: calc(100% - 30px);
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown .dropdown:hover>ul {
|
||||||
|
opacity: 1;
|
||||||
|
top: 0;
|
||||||
|
left: 100%;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1280px) and (max-width: 1366px) {
|
||||||
|
.navbar .dropdown .dropdown ul {
|
||||||
|
left: -90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown .dropdown:hover>ul {
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1280px) {
|
||||||
|
|
||||||
|
.mobile-nav-show,
|
||||||
|
.mobile-nav-hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1279px) {
|
||||||
|
.navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: -100%;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
bottom: 0;
|
||||||
|
transition: 0.3s;
|
||||||
|
z-index: 9997;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar ul {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
padding: 50px 0 10px 0;
|
||||||
|
margin: 0;
|
||||||
|
background: rgba(0, 131, 116, 0.9);
|
||||||
|
overflow-y: auto;
|
||||||
|
transition: 0.3s;
|
||||||
|
z-index: 9998;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a,
|
||||||
|
.navbar a:focus {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a i,
|
||||||
|
.navbar a:focus i {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 0;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a:hover,
|
||||||
|
.navbar .active,
|
||||||
|
.navbar .active:focus,
|
||||||
|
.navbar li:hover>a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .getstarted,
|
||||||
|
.navbar .getstarted:focus {
|
||||||
|
background: var(--color-primary);
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 15px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .getstarted:hover,
|
||||||
|
.navbar .getstarted:focus:hover {
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 131, 116, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown ul,
|
||||||
|
.navbar .dropdown .dropdown ul {
|
||||||
|
position: static;
|
||||||
|
display: none;
|
||||||
|
padding: 10px 0;
|
||||||
|
margin: 10px 20px;
|
||||||
|
transition: all 0.5s ease-in-out;
|
||||||
|
background-color: #007466;
|
||||||
|
border: 1px solid #006459;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown>.dropdown-active,
|
||||||
|
.navbar .dropdown .dropdown>.dropdown-active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-show {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
font-size: 28px;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 0;
|
||||||
|
transition: 0.5s;
|
||||||
|
z-index: 9999;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-hide {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 0;
|
||||||
|
transition: 0.5s;
|
||||||
|
position: fixed;
|
||||||
|
right: 20px;
|
||||||
|
top: 20px;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-active {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-active .navbar {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-active .navbar:before {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 106, 93, 0.8);
|
||||||
|
z-index: 9996;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .content h3 {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .content h4 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .content p {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #6c757d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-item {
|
||||||
|
border: 0;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.06);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-item:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-collapse {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-button {
|
||||||
|
padding: 20px 50px 20px 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
border: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: var(--color-default);
|
||||||
|
text-align: left;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-button .num {
|
||||||
|
padding-right: 10px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 0;
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-button:not(.collapsed) {
|
||||||
|
color: var(--color-primary);
|
||||||
|
border-bottom: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-button:after {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-body {
|
||||||
|
padding: 0 40px 30px 45px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
background: var(--color-primary);
|
||||||
|
padding: 60px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1365px) {
|
||||||
|
.hero {
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h2 {
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
font-weight: 400;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .btn-get-started {
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 15px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 14px 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
transition: 0.3s;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .btn-get-started:hover {
|
||||||
|
border-color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .btn-watch-video {
|
||||||
|
font-size: 16px;
|
||||||
|
transition: 0.5s;
|
||||||
|
margin-left: 25px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .btn-watch-video i {
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
font-size: 32px;
|
||||||
|
transition: 0.3s;
|
||||||
|
line-height: 0;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .btn-watch-video:hover i {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.hero h2 {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .btn-get-started,
|
||||||
|
.hero .btn-watch-video {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .icon-boxes {
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.hero .icon-boxes:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: calc(50% + 20px);
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .icon-box {
|
||||||
|
padding: 60px 30px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #008d7d;
|
||||||
|
box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.08);
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
border-radius: 8px;
|
||||||
|
z-index: 1;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .icon-box .title {
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .icon-box .title a {
|
||||||
|
color: #fff;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .icon-box .icon {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-top: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
font-size: 48px;
|
||||||
|
line-height: 1;
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .icon-box:hover {
|
||||||
|
background: #009786;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .icon-box:hover .title a,
|
||||||
|
.hero .icon-box:hover .icon {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
padding: 50px 0;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-info .logo {
|
||||||
|
line-height: 0;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-info .logo img {
|
||||||
|
max-height: 40px;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-info .logo span {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #fff;
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-info p {
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .social-links a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
margin-right: 10px;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .social-links a:hover {
|
||||||
|
color: #fff;
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links ul i {
|
||||||
|
padding-right: 2px;
|
||||||
|
color: rgba(0, 131, 116, 0.8);
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links ul li {
|
||||||
|
padding: 10px 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links ul li:first-child {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links ul a {
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
transition: 0.3s;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links ul a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-contact p {
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .copyright {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .credits {
|
||||||
|
padding-top: 4px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .credits a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 491 B |
After Width: | Height: | Size: 147 KiB |
After Width: | Height: | Size: 89 KiB |
After Width: | Height: | Size: 66 KiB |
After Width: | Height: | Size: 79 KiB |
After Width: | Height: | Size: 109 KiB |
After Width: | Height: | Size: 97 KiB |
|
@ -0,0 +1,244 @@
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const preloader = document.querySelector('#preloader');
|
||||||
|
if (preloader) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
preloader.remove();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectHeader = document.querySelector('#header');
|
||||||
|
if (selectHeader) {
|
||||||
|
let headerOffset = selectHeader.offsetTop;
|
||||||
|
let nextElement = selectHeader.nextElementSibling;
|
||||||
|
|
||||||
|
const headerFixed = () => {
|
||||||
|
if ((headerOffset - window.scrollY) <= 0) {
|
||||||
|
selectHeader.classList.add('sticked');
|
||||||
|
if (nextElement) nextElement.classList.add('sticked-header-offset');
|
||||||
|
} else {
|
||||||
|
selectHeader.classList.remove('sticked');
|
||||||
|
if (nextElement) nextElement.classList.remove('sticked-header-offset');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.addEventListener('load', headerFixed);
|
||||||
|
document.addEventListener('scroll', headerFixed);
|
||||||
|
}
|
||||||
|
|
||||||
|
let navbarlinks = document.querySelectorAll('#navbar a');
|
||||||
|
|
||||||
|
function navbarlinksActive() {
|
||||||
|
navbarlinks.forEach(navbarlink => {
|
||||||
|
|
||||||
|
if (!navbarlink.hash) return;
|
||||||
|
|
||||||
|
let section = document.querySelector(navbarlink.hash);
|
||||||
|
if (!section) return;
|
||||||
|
|
||||||
|
let position = window.scrollY + 200;
|
||||||
|
|
||||||
|
if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
|
||||||
|
navbarlink.classList.add('active');
|
||||||
|
} else {
|
||||||
|
navbarlink.classList.remove('active');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
window.addEventListener('load', navbarlinksActive);
|
||||||
|
document.addEventListener('scroll', navbarlinksActive);
|
||||||
|
|
||||||
|
const mobileNavShow = document.querySelector('.mobile-nav-show');
|
||||||
|
const mobileNavHide = document.querySelector('.mobile-nav-hide');
|
||||||
|
|
||||||
|
document.querySelectorAll('.mobile-nav-toggle').forEach(el => {
|
||||||
|
el.addEventListener('click', function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
mobileNavToogle();
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
function mobileNavToogle() {
|
||||||
|
document.querySelector('body').classList.toggle('mobile-nav-active');
|
||||||
|
mobileNavShow.classList.toggle('d-none');
|
||||||
|
mobileNavHide.classList.toggle('d-none');
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll('#navbar a').forEach(navbarlink => {
|
||||||
|
|
||||||
|
if (!navbarlink.hash) return;
|
||||||
|
|
||||||
|
let section = document.querySelector(navbarlink.hash);
|
||||||
|
if (!section) return;
|
||||||
|
|
||||||
|
navbarlink.addEventListener('click', () => {
|
||||||
|
if (document.querySelector('.mobile-nav-active')) {
|
||||||
|
mobileNavToogle();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
const navDropdowns = document.querySelectorAll('.navbar .dropdown > a');
|
||||||
|
|
||||||
|
navDropdowns.forEach(el => {
|
||||||
|
el.addEventListener('click', function(event) {
|
||||||
|
if (document.querySelector('.mobile-nav-active')) {
|
||||||
|
event.preventDefault();
|
||||||
|
this.classList.toggle('active');
|
||||||
|
this.nextElementSibling.classList.toggle('dropdown-active');
|
||||||
|
|
||||||
|
let dropDownIndicator = this.querySelector('.dropdown-indicator');
|
||||||
|
dropDownIndicator.classList.toggle('bi-chevron-up');
|
||||||
|
dropDownIndicator.classList.toggle('bi-chevron-down');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
const glightbox = GLightbox({
|
||||||
|
selector: '.glightbox'
|
||||||
|
});
|
||||||
|
|
||||||
|
const scrollTop = document.querySelector('.scroll-top');
|
||||||
|
if (scrollTop) {
|
||||||
|
const togglescrollTop = function() {
|
||||||
|
window.scrollY > 100 ? scrollTop.classList.add('active') : scrollTop.classList.remove('active');
|
||||||
|
}
|
||||||
|
window.addEventListener('load', togglescrollTop);
|
||||||
|
document.addEventListener('scroll', togglescrollTop);
|
||||||
|
scrollTop.addEventListener('click', window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: 'smooth'
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
new PureCounter();
|
||||||
|
|
||||||
|
new Swiper('.clients-slider', {
|
||||||
|
speed: 400,
|
||||||
|
loop: true,
|
||||||
|
autoplay: {
|
||||||
|
delay: 5000,
|
||||||
|
disableOnInteraction: false
|
||||||
|
},
|
||||||
|
slidesPerView: 'auto',
|
||||||
|
pagination: {
|
||||||
|
el: '.swiper-pagination',
|
||||||
|
type: 'bullets',
|
||||||
|
clickable: true
|
||||||
|
},
|
||||||
|
breakpoints: {
|
||||||
|
320: {
|
||||||
|
slidesPerView: 2,
|
||||||
|
spaceBetween: 40
|
||||||
|
},
|
||||||
|
480: {
|
||||||
|
slidesPerView: 3,
|
||||||
|
spaceBetween: 60
|
||||||
|
},
|
||||||
|
640: {
|
||||||
|
slidesPerView: 4,
|
||||||
|
spaceBetween: 80
|
||||||
|
},
|
||||||
|
992: {
|
||||||
|
slidesPerView: 6,
|
||||||
|
spaceBetween: 120
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
new Swiper('.slides-1', {
|
||||||
|
speed: 600,
|
||||||
|
loop: true,
|
||||||
|
autoplay: {
|
||||||
|
delay: 5000,
|
||||||
|
disableOnInteraction: false
|
||||||
|
},
|
||||||
|
slidesPerView: 'auto',
|
||||||
|
pagination: {
|
||||||
|
el: '.swiper-pagination',
|
||||||
|
type: 'bullets',
|
||||||
|
clickable: true
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
prevEl: '.swiper-button-prev',
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
new Swiper('.slides-3', {
|
||||||
|
speed: 600,
|
||||||
|
loop: true,
|
||||||
|
autoplay: {
|
||||||
|
delay: 5000,
|
||||||
|
disableOnInteraction: false
|
||||||
|
},
|
||||||
|
slidesPerView: 'auto',
|
||||||
|
pagination: {
|
||||||
|
el: '.swiper-pagination',
|
||||||
|
type: 'bullets',
|
||||||
|
clickable: true
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
prevEl: '.swiper-button-prev',
|
||||||
|
},
|
||||||
|
breakpoints: {
|
||||||
|
320: {
|
||||||
|
slidesPerView: 1,
|
||||||
|
spaceBetween: 40
|
||||||
|
},
|
||||||
|
|
||||||
|
1200: {
|
||||||
|
slidesPerView: 3,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let portfolionIsotope = document.querySelector('.portfolio-isotope');
|
||||||
|
|
||||||
|
if (portfolionIsotope) {
|
||||||
|
|
||||||
|
let portfolioFilter = portfolionIsotope.getAttribute('data-portfolio-filter') ? portfolionIsotope.getAttribute('data-portfolio-filter') : '*';
|
||||||
|
let portfolioLayout = portfolionIsotope.getAttribute('data-portfolio-layout') ? portfolionIsotope.getAttribute('data-portfolio-layout') : 'masonry';
|
||||||
|
let portfolioSort = portfolionIsotope.getAttribute('data-portfolio-sort') ? portfolionIsotope.getAttribute('data-portfolio-sort') : 'original-order';
|
||||||
|
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
let portfolioIsotope = new Isotope(document.querySelector('.portfolio-container'), {
|
||||||
|
itemSelector: '.portfolio-item',
|
||||||
|
layoutMode: portfolioLayout,
|
||||||
|
filter: portfolioFilter,
|
||||||
|
sortBy: portfolioSort
|
||||||
|
});
|
||||||
|
|
||||||
|
let menuFilters = document.querySelectorAll('.portfolio-isotope .portfolio-flters li');
|
||||||
|
menuFilters.forEach(function(el) {
|
||||||
|
el.addEventListener('click', function() {
|
||||||
|
document.querySelector('.portfolio-isotope .portfolio-flters .filter-active').classList.remove('filter-active');
|
||||||
|
this.classList.add('filter-active');
|
||||||
|
portfolioIsotope.arrange({
|
||||||
|
filter: this.getAttribute('data-filter')
|
||||||
|
});
|
||||||
|
if (typeof aos_init === 'function') {
|
||||||
|
aos_init();
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function aos_init() {
|
||||||
|
AOS.init({
|
||||||
|
duration: 1000,
|
||||||
|
easing: 'ease-in-out',
|
||||||
|
once: true,
|
||||||
|
mirror: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
aos_init();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
|
@ -0,0 +1,885 @@
|
||||||
|
/* Fonts */
|
||||||
|
:root {
|
||||||
|
--font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
--font-primary: "Montserrat", sans-serif;
|
||||||
|
--font-secondary: "Poppins", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Colors */
|
||||||
|
:root {
|
||||||
|
--color-default: #222222;
|
||||||
|
--color-primary: #008374;
|
||||||
|
--color-secondary: #f85a40;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth scroll behavior */
|
||||||
|
:root {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-default);
|
||||||
|
color: var(--color-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #00b6a1;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: 60px 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sections-bg {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header h2:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 50px;
|
||||||
|
height: 3px;
|
||||||
|
background: var(--color-primary);
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
color: #6f6f6f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs .page-header {
|
||||||
|
padding: 60px 0 60px 0;
|
||||||
|
min-height: 20vh;
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs .page-header h2 {
|
||||||
|
font-size: 56px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #fff;
|
||||||
|
font-family: var(--font-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs .page-header p {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs nav {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs nav ol {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-default);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs nav ol a {
|
||||||
|
color: var(--color-primary);
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs nav ol a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs nav ol li+li {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs nav ol li+li::before {
|
||||||
|
display: inline-block;
|
||||||
|
padding-right: 10px;
|
||||||
|
color: var(--color-secondary);
|
||||||
|
content: "/";
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-top {
|
||||||
|
position: fixed;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
right: 15px;
|
||||||
|
bottom: -15px;
|
||||||
|
z-index: 99999;
|
||||||
|
background: var(--color-secondary);
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 50px;
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-top i {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-top:hover {
|
||||||
|
background: rgba(248, 90, 64, 0.8);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-top.active {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preloader {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 999999;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
|
transition: all 0.6s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preloader:before {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
top: calc(50% - 30px);
|
||||||
|
left: calc(50% - 30px);
|
||||||
|
border: 6px solid #fff;
|
||||||
|
border-color: var(--color-primary) transparent var(--color-primary) transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
animation: animate-preloader 1.5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animate-preloader {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
[data-aos-delay] {
|
||||||
|
transition-delay: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
background: #00796b;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: all 0.5s;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .contact-info i {
|
||||||
|
font-style: normal;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .contact-info i a,
|
||||||
|
.topbar .contact-info i span {
|
||||||
|
padding-left: 5px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575px) {
|
||||||
|
|
||||||
|
.topbar .contact-info i a,
|
||||||
|
.topbar .contact-info i span {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .contact-info i a {
|
||||||
|
line-height: 0;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .contact-info i a:hover {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .social-links a {
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
line-height: 0;
|
||||||
|
transition: 0.3s;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .social-links a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
transition: all 0.5s;
|
||||||
|
z-index: 997;
|
||||||
|
height: 90px;
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header.sticked {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 70px;
|
||||||
|
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .logo img {
|
||||||
|
max-height: 40px;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .logo h1 {
|
||||||
|
font-size: 30px;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.8px;
|
||||||
|
color: #fff;
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .logo h1 span {
|
||||||
|
color: #f96f59;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticked-header-offset {
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
scroll-margin-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1280px) {
|
||||||
|
.navbar {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar li {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar>ul>li {
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 10px 0 10px 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a,
|
||||||
|
.navbar a:focus {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 3px;
|
||||||
|
font-family: var(--font-secondary);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: 0.3s;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a i,
|
||||||
|
.navbar a:focus i {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 0;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar>ul>li>a:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
bottom: -6px;
|
||||||
|
left: 0;
|
||||||
|
background-color: var(--color-secondary);
|
||||||
|
visibility: hidden;
|
||||||
|
width: 0px;
|
||||||
|
transition: all 0.3s ease-in-out 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a:hover:before,
|
||||||
|
.navbar li:hover>a:before,
|
||||||
|
.navbar .active:before {
|
||||||
|
visibility: visible;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a:hover,
|
||||||
|
.navbar .active,
|
||||||
|
.navbar .active:focus,
|
||||||
|
.navbar li:hover>a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown ul {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 28px;
|
||||||
|
top: calc(100% + 30px);
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
z-index: 99;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
|
||||||
|
transition: 0.3s;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown ul li {
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown ul a {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 15px;
|
||||||
|
text-transform: none;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #006a5d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown ul a i {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown ul a:hover,
|
||||||
|
.navbar .dropdown ul .active:hover,
|
||||||
|
.navbar .dropdown ul li:hover>a {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown:hover>ul {
|
||||||
|
opacity: 1;
|
||||||
|
top: 100%;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown .dropdown ul {
|
||||||
|
top: 0;
|
||||||
|
left: calc(100% - 30px);
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown .dropdown:hover>ul {
|
||||||
|
opacity: 1;
|
||||||
|
top: 0;
|
||||||
|
left: 100%;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1280px) and (max-width: 1366px) {
|
||||||
|
.navbar .dropdown .dropdown ul {
|
||||||
|
left: -90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown .dropdown:hover>ul {
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1280px) {
|
||||||
|
|
||||||
|
.mobile-nav-show,
|
||||||
|
.mobile-nav-hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1279px) {
|
||||||
|
.navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: -100%;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
bottom: 0;
|
||||||
|
transition: 0.3s;
|
||||||
|
z-index: 9997;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar ul {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
padding: 50px 0 10px 0;
|
||||||
|
margin: 0;
|
||||||
|
background: rgba(0, 131, 116, 0.9);
|
||||||
|
overflow-y: auto;
|
||||||
|
transition: 0.3s;
|
||||||
|
z-index: 9998;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a,
|
||||||
|
.navbar a:focus {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a i,
|
||||||
|
.navbar a:focus i {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 0;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a:hover,
|
||||||
|
.navbar .active,
|
||||||
|
.navbar .active:focus,
|
||||||
|
.navbar li:hover>a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .getstarted,
|
||||||
|
.navbar .getstarted:focus {
|
||||||
|
background: var(--color-primary);
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 15px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .getstarted:hover,
|
||||||
|
.navbar .getstarted:focus:hover {
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 131, 116, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown ul,
|
||||||
|
.navbar .dropdown .dropdown ul {
|
||||||
|
position: static;
|
||||||
|
display: none;
|
||||||
|
padding: 10px 0;
|
||||||
|
margin: 10px 20px;
|
||||||
|
transition: all 0.5s ease-in-out;
|
||||||
|
background-color: #007466;
|
||||||
|
border: 1px solid #006459;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .dropdown>.dropdown-active,
|
||||||
|
.navbar .dropdown .dropdown>.dropdown-active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-show {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
font-size: 28px;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 0;
|
||||||
|
transition: 0.5s;
|
||||||
|
z-index: 9999;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-hide {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 0;
|
||||||
|
transition: 0.5s;
|
||||||
|
position: fixed;
|
||||||
|
right: 20px;
|
||||||
|
top: 20px;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-active {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-active .navbar {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-active .navbar:before {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 106, 93, 0.8);
|
||||||
|
z-index: 9996;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .content h3 {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .content h4 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .content p {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #6c757d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-item {
|
||||||
|
border: 0;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.06);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-item:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-collapse {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-button {
|
||||||
|
padding: 20px 50px 20px 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
border: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: var(--color-default);
|
||||||
|
text-align: left;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-button .num {
|
||||||
|
padding-right: 10px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 0;
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-button:not(.collapsed) {
|
||||||
|
color: var(--color-primary);
|
||||||
|
border-bottom: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-button:after {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq .accordion-body {
|
||||||
|
padding: 0 40px 30px 45px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
background: var(--color-primary);
|
||||||
|
padding: 60px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1365px) {
|
||||||
|
.hero {
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h2 {
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
font-weight: 400;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .btn-get-started {
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 15px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 14px 40px;
|
||||||
|
border-radius: 50px;
|
||||||
|
transition: 0.3s;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .btn-get-started:hover {
|
||||||
|
border-color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .btn-watch-video {
|
||||||
|
font-size: 16px;
|
||||||
|
transition: 0.5s;
|
||||||
|
margin-left: 25px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .btn-watch-video i {
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
font-size: 32px;
|
||||||
|
transition: 0.3s;
|
||||||
|
line-height: 0;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .btn-watch-video:hover i {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.hero h2 {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .btn-get-started,
|
||||||
|
.hero .btn-watch-video {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .icon-boxes {
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.hero .icon-boxes:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: calc(50% + 20px);
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .icon-box {
|
||||||
|
padding: 60px 30px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #008d7d;
|
||||||
|
box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.08);
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
border-radius: 8px;
|
||||||
|
z-index: 1;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .icon-box .title {
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .icon-box .title a {
|
||||||
|
color: #fff;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .icon-box .icon {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-top: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
font-size: 48px;
|
||||||
|
line-height: 1;
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .icon-box:hover {
|
||||||
|
background: #009786;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .icon-box:hover .title a,
|
||||||
|
.hero .icon-box:hover .icon {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
padding: 50px 0;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-info .logo {
|
||||||
|
line-height: 0;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-info .logo img {
|
||||||
|
max-height: 40px;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-info .logo span {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #fff;
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-info p {
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .social-links a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
margin-right: 10px;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .social-links a:hover {
|
||||||
|
color: #fff;
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links ul i {
|
||||||
|
padding-right: 2px;
|
||||||
|
color: rgba(0, 131, 116, 0.8);
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links ul li {
|
||||||
|
padding: 10px 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links ul li:first-child {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links ul a {
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
transition: 0.3s;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-links ul a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer-contact p {
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .copyright {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .credits {
|
||||||
|
padding-top: 4px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .credits a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
|
@ -0,0 +1,614 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
||||||
|
|
||||||
|
var throttle = _interopDefault(require('lodash.throttle'));
|
||||||
|
var debounce = _interopDefault(require('lodash.debounce'));
|
||||||
|
|
||||||
|
var callback = function callback() {};
|
||||||
|
|
||||||
|
function containsAOSNode(nodes) {
|
||||||
|
var i = void 0,
|
||||||
|
currentNode = void 0,
|
||||||
|
result = void 0;
|
||||||
|
|
||||||
|
for (i = 0; i < nodes.length; i += 1) {
|
||||||
|
currentNode = nodes[i];
|
||||||
|
|
||||||
|
if (currentNode.dataset && currentNode.dataset.aos) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
result = currentNode.children && containsAOSNode(currentNode.children);
|
||||||
|
|
||||||
|
if (result) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function check(mutations) {
|
||||||
|
if (!mutations) return;
|
||||||
|
|
||||||
|
mutations.forEach(function (mutation) {
|
||||||
|
var addedNodes = Array.prototype.slice.call(mutation.addedNodes);
|
||||||
|
var removedNodes = Array.prototype.slice.call(mutation.removedNodes);
|
||||||
|
var allNodes = addedNodes.concat(removedNodes);
|
||||||
|
|
||||||
|
if (containsAOSNode(allNodes)) {
|
||||||
|
return callback();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMutationObserver() {
|
||||||
|
return window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSupported() {
|
||||||
|
return !!getMutationObserver();
|
||||||
|
}
|
||||||
|
|
||||||
|
function ready(selector, fn) {
|
||||||
|
var doc = window.document;
|
||||||
|
var MutationObserver = getMutationObserver();
|
||||||
|
|
||||||
|
var observer = new MutationObserver(check);
|
||||||
|
callback = fn;
|
||||||
|
|
||||||
|
observer.observe(doc.documentElement, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
removedNodes: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var observer = { isSupported: isSupported, ready: ready };
|
||||||
|
|
||||||
|
var classCallCheck = function (instance, Constructor) {
|
||||||
|
if (!(instance instanceof Constructor)) {
|
||||||
|
throw new TypeError("Cannot call a class as a function");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var createClass = function () {
|
||||||
|
function defineProperties(target, props) {
|
||||||
|
for (var i = 0; i < props.length; i++) {
|
||||||
|
var descriptor = props[i];
|
||||||
|
descriptor.enumerable = descriptor.enumerable || false;
|
||||||
|
descriptor.configurable = true;
|
||||||
|
if ("value" in descriptor) descriptor.writable = true;
|
||||||
|
Object.defineProperty(target, descriptor.key, descriptor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return function (Constructor, protoProps, staticProps) {
|
||||||
|
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||||||
|
if (staticProps) defineProperties(Constructor, staticProps);
|
||||||
|
return Constructor;
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
var _extends = Object.assign || function (target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i];
|
||||||
|
|
||||||
|
for (var key in source) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||||
|
target[key] = source[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Device detector
|
||||||
|
*/
|
||||||
|
|
||||||
|
var fullNameRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i;
|
||||||
|
var prefixRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
|
||||||
|
var fullNameMobileRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i;
|
||||||
|
var prefixMobileRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
|
||||||
|
|
||||||
|
function ua() {
|
||||||
|
return navigator.userAgent || navigator.vendor || window.opera || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
var Detector = function () {
|
||||||
|
function Detector() {
|
||||||
|
classCallCheck(this, Detector);
|
||||||
|
}
|
||||||
|
|
||||||
|
createClass(Detector, [{
|
||||||
|
key: 'phone',
|
||||||
|
value: function phone() {
|
||||||
|
var a = ua();
|
||||||
|
return !!(fullNameRe.test(a) || prefixRe.test(a.substr(0, 4)));
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'mobile',
|
||||||
|
value: function mobile() {
|
||||||
|
var a = ua();
|
||||||
|
return !!(fullNameMobileRe.test(a) || prefixMobileRe.test(a.substr(0, 4)));
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'tablet',
|
||||||
|
value: function tablet() {
|
||||||
|
return this.mobile() && !this.phone();
|
||||||
|
}
|
||||||
|
|
||||||
|
// http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c
|
||||||
|
|
||||||
|
}, {
|
||||||
|
key: 'ie11',
|
||||||
|
value: function ie11() {
|
||||||
|
return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
return Detector;
|
||||||
|
}();
|
||||||
|
|
||||||
|
var detect = new Detector();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Adds multiple classes on node
|
||||||
|
* @param {DOMNode} node
|
||||||
|
* @param {array} classes
|
||||||
|
*/
|
||||||
|
var addClasses = function addClasses(node, classes) {
|
||||||
|
return classes && classes.forEach(function (className) {
|
||||||
|
return node.classList.add(className);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Removes multiple classes from node
|
||||||
|
* @param {DOMNode} node
|
||||||
|
* @param {array} classes
|
||||||
|
*/
|
||||||
|
var removeClasses = function removeClasses(node, classes) {
|
||||||
|
return classes && classes.forEach(function (className) {
|
||||||
|
return node.classList.remove(className);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var fireEvent = function fireEvent(eventName, data) {
|
||||||
|
var customEvent = void 0;
|
||||||
|
|
||||||
|
if (detect.ie11()) {
|
||||||
|
customEvent = document.createEvent('CustomEvent');
|
||||||
|
customEvent.initCustomEvent(eventName, true, true, { detail: data });
|
||||||
|
} else {
|
||||||
|
customEvent = new CustomEvent(eventName, {
|
||||||
|
detail: data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return document.dispatchEvent(customEvent);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set or remove aos-animate class
|
||||||
|
* @param {node} el element
|
||||||
|
* @param {int} top scrolled distance
|
||||||
|
*/
|
||||||
|
var applyClasses = function applyClasses(el, top) {
|
||||||
|
var options = el.options,
|
||||||
|
position = el.position,
|
||||||
|
node = el.node,
|
||||||
|
data = el.data;
|
||||||
|
|
||||||
|
|
||||||
|
var hide = function hide() {
|
||||||
|
if (!el.animated) return;
|
||||||
|
|
||||||
|
removeClasses(node, options.animatedClassNames);
|
||||||
|
fireEvent('aos:out', node);
|
||||||
|
|
||||||
|
if (el.options.id) {
|
||||||
|
fireEvent('aos:in:' + el.options.id, node);
|
||||||
|
}
|
||||||
|
|
||||||
|
el.animated = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
var show = function show() {
|
||||||
|
if (el.animated) return;
|
||||||
|
|
||||||
|
addClasses(node, options.animatedClassNames);
|
||||||
|
|
||||||
|
fireEvent('aos:in', node);
|
||||||
|
if (el.options.id) {
|
||||||
|
fireEvent('aos:in:' + el.options.id, node);
|
||||||
|
}
|
||||||
|
|
||||||
|
el.animated = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (options.mirror && top >= position.out && !options.once) {
|
||||||
|
hide();
|
||||||
|
} else if (top >= position.in) {
|
||||||
|
show();
|
||||||
|
} else if (el.animated && !options.once) {
|
||||||
|
hide();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Scroll logic - add or remove 'aos-animate' class on scroll
|
||||||
|
*
|
||||||
|
* @param {array} $elements array of elements nodes
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
var handleScroll = function handleScroll($elements) {
|
||||||
|
return $elements.forEach(function (el, i) {
|
||||||
|
return applyClasses(el, window.pageYOffset);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get offset of DOM element
|
||||||
|
* like there were no transforms applied on it
|
||||||
|
*
|
||||||
|
* @param {Node} el [DOM element]
|
||||||
|
* @return {Object} [top and left offset]
|
||||||
|
*/
|
||||||
|
var offset = function offset(el) {
|
||||||
|
var _x = 0;
|
||||||
|
var _y = 0;
|
||||||
|
|
||||||
|
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
|
||||||
|
_x += el.offsetLeft - (el.tagName != 'BODY' ? el.scrollLeft : 0);
|
||||||
|
_y += el.offsetTop - (el.tagName != 'BODY' ? el.scrollTop : 0);
|
||||||
|
el = el.offsetParent;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
top: _y,
|
||||||
|
left: _x
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get inline option with a fallback.
|
||||||
|
*
|
||||||
|
* @param {Node} el [Dom element]
|
||||||
|
* @param {String} key [Option key]
|
||||||
|
* @param {String} fallback [Default (fallback) value]
|
||||||
|
* @return {Mixed} [Option set with inline attributes or fallback value if not set]
|
||||||
|
*/
|
||||||
|
|
||||||
|
var getInlineOption = (function (el, key, fallback) {
|
||||||
|
var attr = el.getAttribute('data-aos-' + key);
|
||||||
|
|
||||||
|
if (typeof attr !== 'undefined') {
|
||||||
|
if (attr === 'true') {
|
||||||
|
return true;
|
||||||
|
} else if (attr === 'false') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return attr || fallback;
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate offset
|
||||||
|
* basing on element's settings like:
|
||||||
|
* - anchor
|
||||||
|
* - offset
|
||||||
|
*
|
||||||
|
* @param {Node} el [Dom element]
|
||||||
|
* @return {Integer} [Final offset that will be used to trigger animation in good position]
|
||||||
|
*/
|
||||||
|
|
||||||
|
var getPositionIn = function getPositionIn(el, defaultOffset, defaultAnchorPlacement) {
|
||||||
|
var windowHeight = window.innerHeight;
|
||||||
|
var anchor = getInlineOption(el, 'anchor');
|
||||||
|
var inlineAnchorPlacement = getInlineOption(el, 'anchor-placement');
|
||||||
|
var additionalOffset = Number(getInlineOption(el, 'offset', inlineAnchorPlacement ? 0 : defaultOffset));
|
||||||
|
var anchorPlacement = inlineAnchorPlacement || defaultAnchorPlacement;
|
||||||
|
var finalEl = el;
|
||||||
|
|
||||||
|
if (anchor && document.querySelectorAll(anchor)) {
|
||||||
|
finalEl = document.querySelectorAll(anchor)[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
var triggerPoint = offset(finalEl).top - windowHeight;
|
||||||
|
|
||||||
|
switch (anchorPlacement) {
|
||||||
|
case 'top-bottom':
|
||||||
|
// Default offset
|
||||||
|
break;
|
||||||
|
case 'center-bottom':
|
||||||
|
triggerPoint += finalEl.offsetHeight / 2;
|
||||||
|
break;
|
||||||
|
case 'bottom-bottom':
|
||||||
|
triggerPoint += finalEl.offsetHeight;
|
||||||
|
break;
|
||||||
|
case 'top-center':
|
||||||
|
triggerPoint += windowHeight / 2;
|
||||||
|
break;
|
||||||
|
case 'center-center':
|
||||||
|
triggerPoint += windowHeight / 2 + finalEl.offsetHeight / 2;
|
||||||
|
break;
|
||||||
|
case 'bottom-center':
|
||||||
|
triggerPoint += windowHeight / 2 + finalEl.offsetHeight;
|
||||||
|
break;
|
||||||
|
case 'top-top':
|
||||||
|
triggerPoint += windowHeight;
|
||||||
|
break;
|
||||||
|
case 'bottom-top':
|
||||||
|
triggerPoint += windowHeight + finalEl.offsetHeight;
|
||||||
|
break;
|
||||||
|
case 'center-top':
|
||||||
|
triggerPoint += windowHeight + finalEl.offsetHeight / 2;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return triggerPoint + additionalOffset;
|
||||||
|
};
|
||||||
|
|
||||||
|
var getPositionOut = function getPositionOut(el, defaultOffset) {
|
||||||
|
var windowHeight = window.innerHeight;
|
||||||
|
var anchor = getInlineOption(el, 'anchor');
|
||||||
|
var additionalOffset = getInlineOption(el, 'offset', defaultOffset);
|
||||||
|
var finalEl = el;
|
||||||
|
|
||||||
|
if (anchor && document.querySelectorAll(anchor)) {
|
||||||
|
finalEl = document.querySelectorAll(anchor)[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
var elementOffsetTop = offset(finalEl).top;
|
||||||
|
|
||||||
|
return elementOffsetTop + finalEl.offsetHeight - additionalOffset;
|
||||||
|
};
|
||||||
|
|
||||||
|
/* Clearing variables */
|
||||||
|
|
||||||
|
var prepare = function prepare($elements, options) {
|
||||||
|
$elements.forEach(function (el, i) {
|
||||||
|
var mirror = getInlineOption(el.node, 'mirror', options.mirror);
|
||||||
|
var once = getInlineOption(el.node, 'once', options.once);
|
||||||
|
var id = getInlineOption(el.node, 'id');
|
||||||
|
var customClassNames = options.useClassNames && el.node.getAttribute('data-aos');
|
||||||
|
|
||||||
|
var animatedClassNames = [options.animatedClassName].concat(customClassNames ? customClassNames.split(' ') : []).filter(function (className) {
|
||||||
|
return typeof className === 'string';
|
||||||
|
});
|
||||||
|
|
||||||
|
if (options.initClassName) {
|
||||||
|
el.node.classList.add(options.initClassName);
|
||||||
|
}
|
||||||
|
|
||||||
|
el.position = {
|
||||||
|
in: getPositionIn(el.node, options.offset, options.anchorPlacement),
|
||||||
|
out: mirror && getPositionOut(el.node, options.offset)
|
||||||
|
};
|
||||||
|
|
||||||
|
el.options = {
|
||||||
|
once: once,
|
||||||
|
mirror: mirror,
|
||||||
|
animatedClassNames: animatedClassNames,
|
||||||
|
id: id
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return $elements;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate initial array with elements as objects
|
||||||
|
* This array will be extended later with elements attributes values
|
||||||
|
* like 'position'
|
||||||
|
*/
|
||||||
|
var elements = (function () {
|
||||||
|
var elements = document.querySelectorAll('[data-aos]');
|
||||||
|
return Array.prototype.map.call(elements, function (node) {
|
||||||
|
return { node: node };
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* *******************************************************
|
||||||
|
* AOS (Animate on scroll) - wowjs alternative
|
||||||
|
* made to animate elements on scroll in both directions
|
||||||
|
* *******************************************************
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Private variables
|
||||||
|
*/
|
||||||
|
var $aosElements = [];
|
||||||
|
var initialized = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Default options
|
||||||
|
*/
|
||||||
|
var options = {
|
||||||
|
offset: 120,
|
||||||
|
delay: 0,
|
||||||
|
easing: 'ease',
|
||||||
|
duration: 400,
|
||||||
|
disable: false,
|
||||||
|
once: false,
|
||||||
|
mirror: false,
|
||||||
|
anchorPlacement: 'top-bottom',
|
||||||
|
startEvent: 'DOMContentLoaded',
|
||||||
|
animatedClassName: 'aos-animate',
|
||||||
|
initClassName: 'aos-init',
|
||||||
|
useClassNames: false,
|
||||||
|
disableMutationObserver: false,
|
||||||
|
throttleDelay: 99,
|
||||||
|
debounceDelay: 50
|
||||||
|
};
|
||||||
|
|
||||||
|
// Detect not supported browsers (<=IE9)
|
||||||
|
// http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
|
||||||
|
var isBrowserNotSupported = function isBrowserNotSupported() {
|
||||||
|
return document.all && !window.atob;
|
||||||
|
};
|
||||||
|
|
||||||
|
var initializeScroll = function initializeScroll() {
|
||||||
|
// Extend elements objects in $aosElements with their positions
|
||||||
|
$aosElements = prepare($aosElements, options);
|
||||||
|
// Perform scroll event, to refresh view and show/hide elements
|
||||||
|
handleScroll($aosElements);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle scroll event to animate elements on scroll
|
||||||
|
*/
|
||||||
|
window.addEventListener('scroll', throttle(function () {
|
||||||
|
handleScroll($aosElements, options.once);
|
||||||
|
}, options.throttleDelay));
|
||||||
|
|
||||||
|
return $aosElements;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refresh AOS
|
||||||
|
*/
|
||||||
|
var refresh = function refresh() {
|
||||||
|
var initialize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||||
|
|
||||||
|
// Allow refresh only when it was first initialized on startEvent
|
||||||
|
if (initialize) initialized = true;
|
||||||
|
if (initialized) initializeScroll();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hard refresh
|
||||||
|
* create array with new elements and trigger refresh
|
||||||
|
*/
|
||||||
|
var refreshHard = function refreshHard() {
|
||||||
|
$aosElements = elements();
|
||||||
|
|
||||||
|
if (isDisabled(options.disable) || isBrowserNotSupported()) {
|
||||||
|
return disable();
|
||||||
|
}
|
||||||
|
|
||||||
|
refresh();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable AOS
|
||||||
|
* Remove all attributes to reset applied styles
|
||||||
|
*/
|
||||||
|
var disable = function disable() {
|
||||||
|
$aosElements.forEach(function (el, i) {
|
||||||
|
el.node.removeAttribute('data-aos');
|
||||||
|
el.node.removeAttribute('data-aos-easing');
|
||||||
|
el.node.removeAttribute('data-aos-duration');
|
||||||
|
el.node.removeAttribute('data-aos-delay');
|
||||||
|
|
||||||
|
if (options.initClassName) {
|
||||||
|
el.node.classList.remove(options.initClassName);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.animatedClassName) {
|
||||||
|
el.node.classList.remove(options.animatedClassName);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if AOS should be disabled based on provided setting
|
||||||
|
*/
|
||||||
|
var isDisabled = function isDisabled(optionDisable) {
|
||||||
|
return optionDisable === true || optionDisable === 'mobile' && detect.mobile() || optionDisable === 'phone' && detect.phone() || optionDisable === 'tablet' && detect.tablet() || typeof optionDisable === 'function' && optionDisable() === true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initializing AOS
|
||||||
|
* - Create options merging defaults with user defined options
|
||||||
|
* - Set attributes on <body> as global setting - css relies on it
|
||||||
|
* - Attach preparing elements to options.startEvent,
|
||||||
|
* window resize and orientation change
|
||||||
|
* - Attach function that handle scroll and everything connected to it
|
||||||
|
* to window scroll event and fire once document is ready to set initial state
|
||||||
|
*/
|
||||||
|
var init = function init(settings) {
|
||||||
|
options = _extends(options, settings);
|
||||||
|
|
||||||
|
// Create initial array with elements -> to be fullfilled later with prepare()
|
||||||
|
$aosElements = elements();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable mutation observing if not supported
|
||||||
|
*/
|
||||||
|
if (!options.disableMutationObserver && !observer.isSupported()) {
|
||||||
|
console.info('\n aos: MutationObserver is not supported on this browser,\n code mutations observing has been disabled.\n You may have to call "refreshHard()" by yourself.\n ');
|
||||||
|
options.disableMutationObserver = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Observe [aos] elements
|
||||||
|
* If something is loaded by AJAX
|
||||||
|
* it'll refresh plugin automatically
|
||||||
|
*/
|
||||||
|
if (!options.disableMutationObserver) {
|
||||||
|
observer.ready('[data-aos]', refreshHard);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Don't init plugin if option `disable` is set
|
||||||
|
* or when browser is not supported
|
||||||
|
*/
|
||||||
|
if (isDisabled(options.disable) || isBrowserNotSupported()) {
|
||||||
|
return disable();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set global settings on body, based on options
|
||||||
|
* so CSS can use it
|
||||||
|
*/
|
||||||
|
document.querySelector('body').setAttribute('data-aos-easing', options.easing);
|
||||||
|
|
||||||
|
document.querySelector('body').setAttribute('data-aos-duration', options.duration);
|
||||||
|
|
||||||
|
document.querySelector('body').setAttribute('data-aos-delay', options.delay);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle initializing
|
||||||
|
*/
|
||||||
|
if (['DOMContentLoaded', 'load'].indexOf(options.startEvent) === -1) {
|
||||||
|
// Listen to options.startEvent and initialize AOS
|
||||||
|
document.addEventListener(options.startEvent, function () {
|
||||||
|
refresh(true);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
window.addEventListener('load', function () {
|
||||||
|
refresh(true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.startEvent === 'DOMContentLoaded' && ['complete', 'interactive'].indexOf(document.readyState) > -1) {
|
||||||
|
// Initialize AOS if default startEvent was already fired
|
||||||
|
refresh(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refresh plugin on window resize or orientation change
|
||||||
|
*/
|
||||||
|
window.addEventListener('resize', debounce(refresh, options.debounceDelay, true));
|
||||||
|
|
||||||
|
window.addEventListener('orientationchange', debounce(refresh, options.debounceDelay, true));
|
||||||
|
|
||||||
|
return $aosElements;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export Public API
|
||||||
|
*/
|
||||||
|
|
||||||
|
var aos = {
|
||||||
|
init: init,
|
||||||
|
refresh: refresh,
|
||||||
|
refreshHard: refreshHard
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = aos;
|
|
@ -0,0 +1,610 @@
|
||||||
|
import throttle from 'lodash.throttle';
|
||||||
|
import debounce from 'lodash.debounce';
|
||||||
|
|
||||||
|
var callback = function callback() {};
|
||||||
|
|
||||||
|
function containsAOSNode(nodes) {
|
||||||
|
var i = void 0,
|
||||||
|
currentNode = void 0,
|
||||||
|
result = void 0;
|
||||||
|
|
||||||
|
for (i = 0; i < nodes.length; i += 1) {
|
||||||
|
currentNode = nodes[i];
|
||||||
|
|
||||||
|
if (currentNode.dataset && currentNode.dataset.aos) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
result = currentNode.children && containsAOSNode(currentNode.children);
|
||||||
|
|
||||||
|
if (result) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function check(mutations) {
|
||||||
|
if (!mutations) return;
|
||||||
|
|
||||||
|
mutations.forEach(function (mutation) {
|
||||||
|
var addedNodes = Array.prototype.slice.call(mutation.addedNodes);
|
||||||
|
var removedNodes = Array.prototype.slice.call(mutation.removedNodes);
|
||||||
|
var allNodes = addedNodes.concat(removedNodes);
|
||||||
|
|
||||||
|
if (containsAOSNode(allNodes)) {
|
||||||
|
return callback();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMutationObserver() {
|
||||||
|
return window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSupported() {
|
||||||
|
return !!getMutationObserver();
|
||||||
|
}
|
||||||
|
|
||||||
|
function ready(selector, fn) {
|
||||||
|
var doc = window.document;
|
||||||
|
var MutationObserver = getMutationObserver();
|
||||||
|
|
||||||
|
var observer = new MutationObserver(check);
|
||||||
|
callback = fn;
|
||||||
|
|
||||||
|
observer.observe(doc.documentElement, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
removedNodes: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var observer = { isSupported: isSupported, ready: ready };
|
||||||
|
|
||||||
|
var classCallCheck = function (instance, Constructor) {
|
||||||
|
if (!(instance instanceof Constructor)) {
|
||||||
|
throw new TypeError("Cannot call a class as a function");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var createClass = function () {
|
||||||
|
function defineProperties(target, props) {
|
||||||
|
for (var i = 0; i < props.length; i++) {
|
||||||
|
var descriptor = props[i];
|
||||||
|
descriptor.enumerable = descriptor.enumerable || false;
|
||||||
|
descriptor.configurable = true;
|
||||||
|
if ("value" in descriptor) descriptor.writable = true;
|
||||||
|
Object.defineProperty(target, descriptor.key, descriptor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return function (Constructor, protoProps, staticProps) {
|
||||||
|
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||||||
|
if (staticProps) defineProperties(Constructor, staticProps);
|
||||||
|
return Constructor;
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
var _extends = Object.assign || function (target) {
|
||||||
|
for (var i = 1; i < arguments.length; i++) {
|
||||||
|
var source = arguments[i];
|
||||||
|
|
||||||
|
for (var key in source) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||||
|
target[key] = source[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return target;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Device detector
|
||||||
|
*/
|
||||||
|
|
||||||
|
var fullNameRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i;
|
||||||
|
var prefixRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
|
||||||
|
var fullNameMobileRe = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i;
|
||||||
|
var prefixMobileRe = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
|
||||||
|
|
||||||
|
function ua() {
|
||||||
|
return navigator.userAgent || navigator.vendor || window.opera || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
var Detector = function () {
|
||||||
|
function Detector() {
|
||||||
|
classCallCheck(this, Detector);
|
||||||
|
}
|
||||||
|
|
||||||
|
createClass(Detector, [{
|
||||||
|
key: 'phone',
|
||||||
|
value: function phone() {
|
||||||
|
var a = ua();
|
||||||
|
return !!(fullNameRe.test(a) || prefixRe.test(a.substr(0, 4)));
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'mobile',
|
||||||
|
value: function mobile() {
|
||||||
|
var a = ua();
|
||||||
|
return !!(fullNameMobileRe.test(a) || prefixMobileRe.test(a.substr(0, 4)));
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'tablet',
|
||||||
|
value: function tablet() {
|
||||||
|
return this.mobile() && !this.phone();
|
||||||
|
}
|
||||||
|
|
||||||
|
// http://browserhacks.com/#hack-acea075d0ac6954f275a70023906050c
|
||||||
|
|
||||||
|
}, {
|
||||||
|
key: 'ie11',
|
||||||
|
value: function ie11() {
|
||||||
|
return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
return Detector;
|
||||||
|
}();
|
||||||
|
|
||||||
|
var detect = new Detector();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Adds multiple classes on node
|
||||||
|
* @param {DOMNode} node
|
||||||
|
* @param {array} classes
|
||||||
|
*/
|
||||||
|
var addClasses = function addClasses(node, classes) {
|
||||||
|
return classes && classes.forEach(function (className) {
|
||||||
|
return node.classList.add(className);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Removes multiple classes from node
|
||||||
|
* @param {DOMNode} node
|
||||||
|
* @param {array} classes
|
||||||
|
*/
|
||||||
|
var removeClasses = function removeClasses(node, classes) {
|
||||||
|
return classes && classes.forEach(function (className) {
|
||||||
|
return node.classList.remove(className);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var fireEvent = function fireEvent(eventName, data) {
|
||||||
|
var customEvent = void 0;
|
||||||
|
|
||||||
|
if (detect.ie11()) {
|
||||||
|
customEvent = document.createEvent('CustomEvent');
|
||||||
|
customEvent.initCustomEvent(eventName, true, true, { detail: data });
|
||||||
|
} else {
|
||||||
|
customEvent = new CustomEvent(eventName, {
|
||||||
|
detail: data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return document.dispatchEvent(customEvent);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set or remove aos-animate class
|
||||||
|
* @param {node} el element
|
||||||
|
* @param {int} top scrolled distance
|
||||||
|
*/
|
||||||
|
var applyClasses = function applyClasses(el, top) {
|
||||||
|
var options = el.options,
|
||||||
|
position = el.position,
|
||||||
|
node = el.node,
|
||||||
|
data = el.data;
|
||||||
|
|
||||||
|
|
||||||
|
var hide = function hide() {
|
||||||
|
if (!el.animated) return;
|
||||||
|
|
||||||
|
removeClasses(node, options.animatedClassNames);
|
||||||
|
fireEvent('aos:out', node);
|
||||||
|
|
||||||
|
if (el.options.id) {
|
||||||
|
fireEvent('aos:in:' + el.options.id, node);
|
||||||
|
}
|
||||||
|
|
||||||
|
el.animated = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
var show = function show() {
|
||||||
|
if (el.animated) return;
|
||||||
|
|
||||||
|
addClasses(node, options.animatedClassNames);
|
||||||
|
|
||||||
|
fireEvent('aos:in', node);
|
||||||
|
if (el.options.id) {
|
||||||
|
fireEvent('aos:in:' + el.options.id, node);
|
||||||
|
}
|
||||||
|
|
||||||
|
el.animated = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (options.mirror && top >= position.out && !options.once) {
|
||||||
|
hide();
|
||||||
|
} else if (top >= position.in) {
|
||||||
|
show();
|
||||||
|
} else if (el.animated && !options.once) {
|
||||||
|
hide();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Scroll logic - add or remove 'aos-animate' class on scroll
|
||||||
|
*
|
||||||
|
* @param {array} $elements array of elements nodes
|
||||||
|
* @return {void}
|
||||||
|
*/
|
||||||
|
var handleScroll = function handleScroll($elements) {
|
||||||
|
return $elements.forEach(function (el, i) {
|
||||||
|
return applyClasses(el, window.pageYOffset);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get offset of DOM element
|
||||||
|
* like there were no transforms applied on it
|
||||||
|
*
|
||||||
|
* @param {Node} el [DOM element]
|
||||||
|
* @return {Object} [top and left offset]
|
||||||
|
*/
|
||||||
|
var offset = function offset(el) {
|
||||||
|
var _x = 0;
|
||||||
|
var _y = 0;
|
||||||
|
|
||||||
|
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
|
||||||
|
_x += el.offsetLeft - (el.tagName != 'BODY' ? el.scrollLeft : 0);
|
||||||
|
_y += el.offsetTop - (el.tagName != 'BODY' ? el.scrollTop : 0);
|
||||||
|
el = el.offsetParent;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
top: _y,
|
||||||
|
left: _x
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get inline option with a fallback.
|
||||||
|
*
|
||||||
|
* @param {Node} el [Dom element]
|
||||||
|
* @param {String} key [Option key]
|
||||||
|
* @param {String} fallback [Default (fallback) value]
|
||||||
|
* @return {Mixed} [Option set with inline attributes or fallback value if not set]
|
||||||
|
*/
|
||||||
|
|
||||||
|
var getInlineOption = (function (el, key, fallback) {
|
||||||
|
var attr = el.getAttribute('data-aos-' + key);
|
||||||
|
|
||||||
|
if (typeof attr !== 'undefined') {
|
||||||
|
if (attr === 'true') {
|
||||||
|
return true;
|
||||||
|
} else if (attr === 'false') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return attr || fallback;
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate offset
|
||||||
|
* basing on element's settings like:
|
||||||
|
* - anchor
|
||||||
|
* - offset
|
||||||
|
*
|
||||||
|
* @param {Node} el [Dom element]
|
||||||
|
* @return {Integer} [Final offset that will be used to trigger animation in good position]
|
||||||
|
*/
|
||||||
|
|
||||||
|
var getPositionIn = function getPositionIn(el, defaultOffset, defaultAnchorPlacement) {
|
||||||
|
var windowHeight = window.innerHeight;
|
||||||
|
var anchor = getInlineOption(el, 'anchor');
|
||||||
|
var inlineAnchorPlacement = getInlineOption(el, 'anchor-placement');
|
||||||
|
var additionalOffset = Number(getInlineOption(el, 'offset', inlineAnchorPlacement ? 0 : defaultOffset));
|
||||||
|
var anchorPlacement = inlineAnchorPlacement || defaultAnchorPlacement;
|
||||||
|
var finalEl = el;
|
||||||
|
|
||||||
|
if (anchor && document.querySelectorAll(anchor)) {
|
||||||
|
finalEl = document.querySelectorAll(anchor)[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
var triggerPoint = offset(finalEl).top - windowHeight;
|
||||||
|
|
||||||
|
switch (anchorPlacement) {
|
||||||
|
case 'top-bottom':
|
||||||
|
// Default offset
|
||||||
|
break;
|
||||||
|
case 'center-bottom':
|
||||||
|
triggerPoint += finalEl.offsetHeight / 2;
|
||||||
|
break;
|
||||||
|
case 'bottom-bottom':
|
||||||
|
triggerPoint += finalEl.offsetHeight;
|
||||||
|
break;
|
||||||
|
case 'top-center':
|
||||||
|
triggerPoint += windowHeight / 2;
|
||||||
|
break;
|
||||||
|
case 'center-center':
|
||||||
|
triggerPoint += windowHeight / 2 + finalEl.offsetHeight / 2;
|
||||||
|
break;
|
||||||
|
case 'bottom-center':
|
||||||
|
triggerPoint += windowHeight / 2 + finalEl.offsetHeight;
|
||||||
|
break;
|
||||||
|
case 'top-top':
|
||||||
|
triggerPoint += windowHeight;
|
||||||
|
break;
|
||||||
|
case 'bottom-top':
|
||||||
|
triggerPoint += windowHeight + finalEl.offsetHeight;
|
||||||
|
break;
|
||||||
|
case 'center-top':
|
||||||
|
triggerPoint += windowHeight + finalEl.offsetHeight / 2;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return triggerPoint + additionalOffset;
|
||||||
|
};
|
||||||
|
|
||||||
|
var getPositionOut = function getPositionOut(el, defaultOffset) {
|
||||||
|
var windowHeight = window.innerHeight;
|
||||||
|
var anchor = getInlineOption(el, 'anchor');
|
||||||
|
var additionalOffset = getInlineOption(el, 'offset', defaultOffset);
|
||||||
|
var finalEl = el;
|
||||||
|
|
||||||
|
if (anchor && document.querySelectorAll(anchor)) {
|
||||||
|
finalEl = document.querySelectorAll(anchor)[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
var elementOffsetTop = offset(finalEl).top;
|
||||||
|
|
||||||
|
return elementOffsetTop + finalEl.offsetHeight - additionalOffset;
|
||||||
|
};
|
||||||
|
|
||||||
|
/* Clearing variables */
|
||||||
|
|
||||||
|
var prepare = function prepare($elements, options) {
|
||||||
|
$elements.forEach(function (el, i) {
|
||||||
|
var mirror = getInlineOption(el.node, 'mirror', options.mirror);
|
||||||
|
var once = getInlineOption(el.node, 'once', options.once);
|
||||||
|
var id = getInlineOption(el.node, 'id');
|
||||||
|
var customClassNames = options.useClassNames && el.node.getAttribute('data-aos');
|
||||||
|
|
||||||
|
var animatedClassNames = [options.animatedClassName].concat(customClassNames ? customClassNames.split(' ') : []).filter(function (className) {
|
||||||
|
return typeof className === 'string';
|
||||||
|
});
|
||||||
|
|
||||||
|
if (options.initClassName) {
|
||||||
|
el.node.classList.add(options.initClassName);
|
||||||
|
}
|
||||||
|
|
||||||
|
el.position = {
|
||||||
|
in: getPositionIn(el.node, options.offset, options.anchorPlacement),
|
||||||
|
out: mirror && getPositionOut(el.node, options.offset)
|
||||||
|
};
|
||||||
|
|
||||||
|
el.options = {
|
||||||
|
once: once,
|
||||||
|
mirror: mirror,
|
||||||
|
animatedClassNames: animatedClassNames,
|
||||||
|
id: id
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return $elements;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate initial array with elements as objects
|
||||||
|
* This array will be extended later with elements attributes values
|
||||||
|
* like 'position'
|
||||||
|
*/
|
||||||
|
var elements = (function () {
|
||||||
|
var elements = document.querySelectorAll('[data-aos]');
|
||||||
|
return Array.prototype.map.call(elements, function (node) {
|
||||||
|
return { node: node };
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* *******************************************************
|
||||||
|
* AOS (Animate on scroll) - wowjs alternative
|
||||||
|
* made to animate elements on scroll in both directions
|
||||||
|
* *******************************************************
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Private variables
|
||||||
|
*/
|
||||||
|
var $aosElements = [];
|
||||||
|
var initialized = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Default options
|
||||||
|
*/
|
||||||
|
var options = {
|
||||||
|
offset: 120,
|
||||||
|
delay: 0,
|
||||||
|
easing: 'ease',
|
||||||
|
duration: 400,
|
||||||
|
disable: false,
|
||||||
|
once: false,
|
||||||
|
mirror: false,
|
||||||
|
anchorPlacement: 'top-bottom',
|
||||||
|
startEvent: 'DOMContentLoaded',
|
||||||
|
animatedClassName: 'aos-animate',
|
||||||
|
initClassName: 'aos-init',
|
||||||
|
useClassNames: false,
|
||||||
|
disableMutationObserver: false,
|
||||||
|
throttleDelay: 99,
|
||||||
|
debounceDelay: 50
|
||||||
|
};
|
||||||
|
|
||||||
|
// Detect not supported browsers (<=IE9)
|
||||||
|
// http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
|
||||||
|
var isBrowserNotSupported = function isBrowserNotSupported() {
|
||||||
|
return document.all && !window.atob;
|
||||||
|
};
|
||||||
|
|
||||||
|
var initializeScroll = function initializeScroll() {
|
||||||
|
// Extend elements objects in $aosElements with their positions
|
||||||
|
$aosElements = prepare($aosElements, options);
|
||||||
|
// Perform scroll event, to refresh view and show/hide elements
|
||||||
|
handleScroll($aosElements);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle scroll event to animate elements on scroll
|
||||||
|
*/
|
||||||
|
window.addEventListener('scroll', throttle(function () {
|
||||||
|
handleScroll($aosElements, options.once);
|
||||||
|
}, options.throttleDelay));
|
||||||
|
|
||||||
|
return $aosElements;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refresh AOS
|
||||||
|
*/
|
||||||
|
var refresh = function refresh() {
|
||||||
|
var initialize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||||
|
|
||||||
|
// Allow refresh only when it was first initialized on startEvent
|
||||||
|
if (initialize) initialized = true;
|
||||||
|
if (initialized) initializeScroll();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hard refresh
|
||||||
|
* create array with new elements and trigger refresh
|
||||||
|
*/
|
||||||
|
var refreshHard = function refreshHard() {
|
||||||
|
$aosElements = elements();
|
||||||
|
|
||||||
|
if (isDisabled(options.disable) || isBrowserNotSupported()) {
|
||||||
|
return disable();
|
||||||
|
}
|
||||||
|
|
||||||
|
refresh();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable AOS
|
||||||
|
* Remove all attributes to reset applied styles
|
||||||
|
*/
|
||||||
|
var disable = function disable() {
|
||||||
|
$aosElements.forEach(function (el, i) {
|
||||||
|
el.node.removeAttribute('data-aos');
|
||||||
|
el.node.removeAttribute('data-aos-easing');
|
||||||
|
el.node.removeAttribute('data-aos-duration');
|
||||||
|
el.node.removeAttribute('data-aos-delay');
|
||||||
|
|
||||||
|
if (options.initClassName) {
|
||||||
|
el.node.classList.remove(options.initClassName);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.animatedClassName) {
|
||||||
|
el.node.classList.remove(options.animatedClassName);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if AOS should be disabled based on provided setting
|
||||||
|
*/
|
||||||
|
var isDisabled = function isDisabled(optionDisable) {
|
||||||
|
return optionDisable === true || optionDisable === 'mobile' && detect.mobile() || optionDisable === 'phone' && detect.phone() || optionDisable === 'tablet' && detect.tablet() || typeof optionDisable === 'function' && optionDisable() === true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initializing AOS
|
||||||
|
* - Create options merging defaults with user defined options
|
||||||
|
* - Set attributes on <body> as global setting - css relies on it
|
||||||
|
* - Attach preparing elements to options.startEvent,
|
||||||
|
* window resize and orientation change
|
||||||
|
* - Attach function that handle scroll and everything connected to it
|
||||||
|
* to window scroll event and fire once document is ready to set initial state
|
||||||
|
*/
|
||||||
|
var init = function init(settings) {
|
||||||
|
options = _extends(options, settings);
|
||||||
|
|
||||||
|
// Create initial array with elements -> to be fullfilled later with prepare()
|
||||||
|
$aosElements = elements();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disable mutation observing if not supported
|
||||||
|
*/
|
||||||
|
if (!options.disableMutationObserver && !observer.isSupported()) {
|
||||||
|
console.info('\n aos: MutationObserver is not supported on this browser,\n code mutations observing has been disabled.\n You may have to call "refreshHard()" by yourself.\n ');
|
||||||
|
options.disableMutationObserver = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Observe [aos] elements
|
||||||
|
* If something is loaded by AJAX
|
||||||
|
* it'll refresh plugin automatically
|
||||||
|
*/
|
||||||
|
if (!options.disableMutationObserver) {
|
||||||
|
observer.ready('[data-aos]', refreshHard);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Don't init plugin if option `disable` is set
|
||||||
|
* or when browser is not supported
|
||||||
|
*/
|
||||||
|
if (isDisabled(options.disable) || isBrowserNotSupported()) {
|
||||||
|
return disable();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set global settings on body, based on options
|
||||||
|
* so CSS can use it
|
||||||
|
*/
|
||||||
|
document.querySelector('body').setAttribute('data-aos-easing', options.easing);
|
||||||
|
|
||||||
|
document.querySelector('body').setAttribute('data-aos-duration', options.duration);
|
||||||
|
|
||||||
|
document.querySelector('body').setAttribute('data-aos-delay', options.delay);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle initializing
|
||||||
|
*/
|
||||||
|
if (['DOMContentLoaded', 'load'].indexOf(options.startEvent) === -1) {
|
||||||
|
// Listen to options.startEvent and initialize AOS
|
||||||
|
document.addEventListener(options.startEvent, function () {
|
||||||
|
refresh(true);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
window.addEventListener('load', function () {
|
||||||
|
refresh(true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.startEvent === 'DOMContentLoaded' && ['complete', 'interactive'].indexOf(document.readyState) > -1) {
|
||||||
|
// Initialize AOS if default startEvent was already fired
|
||||||
|
refresh(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refresh plugin on window resize or orientation change
|
||||||
|
*/
|
||||||
|
window.addEventListener('resize', debounce(refresh, options.debounceDelay, true));
|
||||||
|
|
||||||
|
window.addEventListener('orientationchange', debounce(refresh, options.debounceDelay, true));
|
||||||
|
|
||||||
|
return $aosElements;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export Public API
|
||||||
|
*/
|
||||||
|
|
||||||
|
var aos = {
|
||||||
|
init: init,
|
||||||
|
refresh: refresh,
|
||||||
|
refreshHard: refreshHard
|
||||||
|
};
|
||||||
|
|
||||||
|
export default aos;
|
|
@ -0,0 +1,593 @@
|
||||||
|
/*!
|
||||||
|
* Bootstrap Reboot v5.3.0 (https://getbootstrap.com/)
|
||||||
|
* Copyright 2011-2023 The Bootstrap Authors
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||||
|
*/
|
||||||
|
:root,
|
||||||
|
[data-bs-theme=light] {
|
||||||
|
--bs-blue: #0d6efd;
|
||||||
|
--bs-indigo: #6610f2;
|
||||||
|
--bs-purple: #6f42c1;
|
||||||
|
--bs-pink: #d63384;
|
||||||
|
--bs-red: #dc3545;
|
||||||
|
--bs-orange: #fd7e14;
|
||||||
|
--bs-yellow: #ffc107;
|
||||||
|
--bs-green: #198754;
|
||||||
|
--bs-teal: #20c997;
|
||||||
|
--bs-cyan: #0dcaf0;
|
||||||
|
--bs-black: #000;
|
||||||
|
--bs-white: #fff;
|
||||||
|
--bs-gray: #6c757d;
|
||||||
|
--bs-gray-dark: #343a40;
|
||||||
|
--bs-gray-100: #f8f9fa;
|
||||||
|
--bs-gray-200: #e9ecef;
|
||||||
|
--bs-gray-300: #dee2e6;
|
||||||
|
--bs-gray-400: #ced4da;
|
||||||
|
--bs-gray-500: #adb5bd;
|
||||||
|
--bs-gray-600: #6c757d;
|
||||||
|
--bs-gray-700: #495057;
|
||||||
|
--bs-gray-800: #343a40;
|
||||||
|
--bs-gray-900: #212529;
|
||||||
|
--bs-primary: #0d6efd;
|
||||||
|
--bs-secondary: #6c757d;
|
||||||
|
--bs-success: #198754;
|
||||||
|
--bs-info: #0dcaf0;
|
||||||
|
--bs-warning: #ffc107;
|
||||||
|
--bs-danger: #dc3545;
|
||||||
|
--bs-light: #f8f9fa;
|
||||||
|
--bs-dark: #212529;
|
||||||
|
--bs-primary-rgb: 13, 110, 253;
|
||||||
|
--bs-secondary-rgb: 108, 117, 125;
|
||||||
|
--bs-success-rgb: 25, 135, 84;
|
||||||
|
--bs-info-rgb: 13, 202, 240;
|
||||||
|
--bs-warning-rgb: 255, 193, 7;
|
||||||
|
--bs-danger-rgb: 220, 53, 69;
|
||||||
|
--bs-light-rgb: 248, 249, 250;
|
||||||
|
--bs-dark-rgb: 33, 37, 41;
|
||||||
|
--bs-primary-text-emphasis: #052c65;
|
||||||
|
--bs-secondary-text-emphasis: #2b2f32;
|
||||||
|
--bs-success-text-emphasis: #0a3622;
|
||||||
|
--bs-info-text-emphasis: #055160;
|
||||||
|
--bs-warning-text-emphasis: #664d03;
|
||||||
|
--bs-danger-text-emphasis: #58151c;
|
||||||
|
--bs-light-text-emphasis: #495057;
|
||||||
|
--bs-dark-text-emphasis: #495057;
|
||||||
|
--bs-primary-bg-subtle: #cfe2ff;
|
||||||
|
--bs-secondary-bg-subtle: #e2e3e5;
|
||||||
|
--bs-success-bg-subtle: #d1e7dd;
|
||||||
|
--bs-info-bg-subtle: #cff4fc;
|
||||||
|
--bs-warning-bg-subtle: #fff3cd;
|
||||||
|
--bs-danger-bg-subtle: #f8d7da;
|
||||||
|
--bs-light-bg-subtle: #fcfcfd;
|
||||||
|
--bs-dark-bg-subtle: #ced4da;
|
||||||
|
--bs-primary-border-subtle: #9ec5fe;
|
||||||
|
--bs-secondary-border-subtle: #c4c8cb;
|
||||||
|
--bs-success-border-subtle: #a3cfbb;
|
||||||
|
--bs-info-border-subtle: #9eeaf9;
|
||||||
|
--bs-warning-border-subtle: #ffe69c;
|
||||||
|
--bs-danger-border-subtle: #f1aeb5;
|
||||||
|
--bs-light-border-subtle: #e9ecef;
|
||||||
|
--bs-dark-border-subtle: #adb5bd;
|
||||||
|
--bs-white-rgb: 255, 255, 255;
|
||||||
|
--bs-black-rgb: 0, 0, 0;
|
||||||
|
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||||
|
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||||
|
--bs-body-font-size: 1rem;
|
||||||
|
--bs-body-font-weight: 400;
|
||||||
|
--bs-body-line-height: 1.5;
|
||||||
|
--bs-body-color: #212529;
|
||||||
|
--bs-body-color-rgb: 33, 37, 41;
|
||||||
|
--bs-body-bg: #fff;
|
||||||
|
--bs-body-bg-rgb: 255, 255, 255;
|
||||||
|
--bs-emphasis-color: #000;
|
||||||
|
--bs-emphasis-color-rgb: 0, 0, 0;
|
||||||
|
--bs-secondary-color: rgba(33, 37, 41, 0.75);
|
||||||
|
--bs-secondary-color-rgb: 33, 37, 41;
|
||||||
|
--bs-secondary-bg: #e9ecef;
|
||||||
|
--bs-secondary-bg-rgb: 233, 236, 239;
|
||||||
|
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
|
||||||
|
--bs-tertiary-color-rgb: 33, 37, 41;
|
||||||
|
--bs-tertiary-bg: #f8f9fa;
|
||||||
|
--bs-tertiary-bg-rgb: 248, 249, 250;
|
||||||
|
--bs-heading-color: inherit;
|
||||||
|
--bs-link-color: #0d6efd;
|
||||||
|
--bs-link-color-rgb: 13, 110, 253;
|
||||||
|
--bs-link-decoration: underline;
|
||||||
|
--bs-link-hover-color: #0a58ca;
|
||||||
|
--bs-link-hover-color-rgb: 10, 88, 202;
|
||||||
|
--bs-code-color: #d63384;
|
||||||
|
--bs-highlight-bg: #fff3cd;
|
||||||
|
--bs-border-width: 1px;
|
||||||
|
--bs-border-style: solid;
|
||||||
|
--bs-border-color: #dee2e6;
|
||||||
|
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
|
||||||
|
--bs-border-radius: 0.375rem;
|
||||||
|
--bs-border-radius-sm: 0.25rem;
|
||||||
|
--bs-border-radius-lg: 0.5rem;
|
||||||
|
--bs-border-radius-xl: 1rem;
|
||||||
|
--bs-border-radius-xxl: 2rem;
|
||||||
|
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
|
||||||
|
--bs-border-radius-pill: 50rem;
|
||||||
|
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||||
|
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||||
|
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
||||||
|
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||||
|
--bs-focus-ring-width: 0.25rem;
|
||||||
|
--bs-focus-ring-opacity: 0.25;
|
||||||
|
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
|
||||||
|
--bs-form-valid-color: #198754;
|
||||||
|
--bs-form-valid-border-color: #198754;
|
||||||
|
--bs-form-invalid-color: #dc3545;
|
||||||
|
--bs-form-invalid-border-color: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme=dark] {
|
||||||
|
color-scheme: dark;
|
||||||
|
--bs-body-color: #adb5bd;
|
||||||
|
--bs-body-color-rgb: 173, 181, 189;
|
||||||
|
--bs-body-bg: #212529;
|
||||||
|
--bs-body-bg-rgb: 33, 37, 41;
|
||||||
|
--bs-emphasis-color: #fff;
|
||||||
|
--bs-emphasis-color-rgb: 255, 255, 255;
|
||||||
|
--bs-secondary-color: rgba(173, 181, 189, 0.75);
|
||||||
|
--bs-secondary-color-rgb: 173, 181, 189;
|
||||||
|
--bs-secondary-bg: #343a40;
|
||||||
|
--bs-secondary-bg-rgb: 52, 58, 64;
|
||||||
|
--bs-tertiary-color: rgba(173, 181, 189, 0.5);
|
||||||
|
--bs-tertiary-color-rgb: 173, 181, 189;
|
||||||
|
--bs-tertiary-bg: #2b3035;
|
||||||
|
--bs-tertiary-bg-rgb: 43, 48, 53;
|
||||||
|
--bs-primary-text-emphasis: #6ea8fe;
|
||||||
|
--bs-secondary-text-emphasis: #a7acb1;
|
||||||
|
--bs-success-text-emphasis: #75b798;
|
||||||
|
--bs-info-text-emphasis: #6edff6;
|
||||||
|
--bs-warning-text-emphasis: #ffda6a;
|
||||||
|
--bs-danger-text-emphasis: #ea868f;
|
||||||
|
--bs-light-text-emphasis: #f8f9fa;
|
||||||
|
--bs-dark-text-emphasis: #dee2e6;
|
||||||
|
--bs-primary-bg-subtle: #031633;
|
||||||
|
--bs-secondary-bg-subtle: #161719;
|
||||||
|
--bs-success-bg-subtle: #051b11;
|
||||||
|
--bs-info-bg-subtle: #032830;
|
||||||
|
--bs-warning-bg-subtle: #332701;
|
||||||
|
--bs-danger-bg-subtle: #2c0b0e;
|
||||||
|
--bs-light-bg-subtle: #343a40;
|
||||||
|
--bs-dark-bg-subtle: #1a1d20;
|
||||||
|
--bs-primary-border-subtle: #084298;
|
||||||
|
--bs-secondary-border-subtle: #41464b;
|
||||||
|
--bs-success-border-subtle: #0f5132;
|
||||||
|
--bs-info-border-subtle: #087990;
|
||||||
|
--bs-warning-border-subtle: #997404;
|
||||||
|
--bs-danger-border-subtle: #842029;
|
||||||
|
--bs-light-border-subtle: #495057;
|
||||||
|
--bs-dark-border-subtle: #343a40;
|
||||||
|
--bs-heading-color: inherit;
|
||||||
|
--bs-link-color: #6ea8fe;
|
||||||
|
--bs-link-hover-color: #8bb9fe;
|
||||||
|
--bs-link-color-rgb: 110, 168, 254;
|
||||||
|
--bs-link-hover-color-rgb: 139, 185, 254;
|
||||||
|
--bs-code-color: #e685b5;
|
||||||
|
--bs-border-color: #495057;
|
||||||
|
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
||||||
|
--bs-form-valid-color: #75b798;
|
||||||
|
--bs-form-valid-border-color: #75b798;
|
||||||
|
--bs-form-invalid-color: #ea868f;
|
||||||
|
--bs-form-invalid-border-color: #ea868f;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
:root {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--bs-body-font-family);
|
||||||
|
font-size: var(--bs-body-font-size);
|
||||||
|
font-weight: var(--bs-body-font-weight);
|
||||||
|
line-height: var(--bs-body-line-height);
|
||||||
|
color: var(--bs-body-color);
|
||||||
|
text-align: var(--bs-body-text-align);
|
||||||
|
background-color: var(--bs-body-bg);
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin: 1rem 0;
|
||||||
|
color: inherit;
|
||||||
|
border: 0;
|
||||||
|
border-top: var(--bs-border-width) solid;
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6, h5, h4, h3, h2, h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--bs-heading-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: calc(1.375rem + 1.5vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: calc(1.325rem + 0.9vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: calc(1.3rem + 0.6vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h3 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: calc(1.275rem + 0.3vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h4 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
-webkit-text-decoration: underline dotted;
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
cursor: help;
|
||||||
|
-webkit-text-decoration-skip-ink: none;
|
||||||
|
text-decoration-skip-ink: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
dl {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol ol,
|
||||||
|
ul ul,
|
||||||
|
ol ul,
|
||||||
|
ul ol {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 0.875em;
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
padding: 0.1875em;
|
||||||
|
background-color: var(--bs-highlight-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.75em;
|
||||||
|
line-height: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: var(--bs-font-monospace);
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 0.875em;
|
||||||
|
}
|
||||||
|
pre code {
|
||||||
|
font-size: inherit;
|
||||||
|
color: inherit;
|
||||||
|
word-break: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-size: 0.875em;
|
||||||
|
color: var(--bs-code-color);
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
a > code {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
padding: 0.1875rem 0.375rem;
|
||||||
|
font-size: 0.875em;
|
||||||
|
color: var(--bs-body-bg);
|
||||||
|
background-color: var(--bs-body-color);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
kbd kbd {
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img,
|
||||||
|
svg {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
caption-side: bottom;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
color: var(--bs-secondary-color);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: inherit;
|
||||||
|
text-align: -webkit-match-parent;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead,
|
||||||
|
tbody,
|
||||||
|
tfoot,
|
||||||
|
tr,
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
border-color: inherit;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus:not(:focus-visible) {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
optgroup,
|
||||||
|
textarea {
|
||||||
|
margin: 0;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[role=button] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
word-wrap: normal;
|
||||||
|
}
|
||||||
|
select:disabled {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type=button],
|
||||||
|
[type=reset],
|
||||||
|
[type=submit] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
button:not(:disabled),
|
||||||
|
[type=button]:not(:disabled),
|
||||||
|
[type=reset]:not(:disabled),
|
||||||
|
[type=submit]:not(:disabled) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: calc(1.275rem + 0.3vw);
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
legend {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
legend + * {
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-datetime-edit-fields-wrapper,
|
||||||
|
::-webkit-datetime-edit-text,
|
||||||
|
::-webkit-datetime-edit-minute,
|
||||||
|
::-webkit-datetime-edit-hour-field,
|
||||||
|
::-webkit-datetime-edit-day-field,
|
||||||
|
::-webkit-datetime-edit-month-field,
|
||||||
|
::-webkit-datetime-edit-year-field {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-inner-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type=search] {
|
||||||
|
outline-offset: -2px;
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* rtl:raw:
|
||||||
|
[type="tel"],
|
||||||
|
[type="url"],
|
||||||
|
[type="email"],
|
||||||
|
[type="number"] {
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-color-swatch-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
font: inherit;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
::file-selector-button {
|
||||||
|
font: inherit;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
output {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
|
@ -0,0 +1,590 @@
|
||||||
|
/*!
|
||||||
|
* Bootstrap Reboot v5.3.0 (https://getbootstrap.com/)
|
||||||
|
* Copyright 2011-2023 The Bootstrap Authors
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||||
|
*/
|
||||||
|
:root,
|
||||||
|
[data-bs-theme=light] {
|
||||||
|
--bs-blue: #0d6efd;
|
||||||
|
--bs-indigo: #6610f2;
|
||||||
|
--bs-purple: #6f42c1;
|
||||||
|
--bs-pink: #d63384;
|
||||||
|
--bs-red: #dc3545;
|
||||||
|
--bs-orange: #fd7e14;
|
||||||
|
--bs-yellow: #ffc107;
|
||||||
|
--bs-green: #198754;
|
||||||
|
--bs-teal: #20c997;
|
||||||
|
--bs-cyan: #0dcaf0;
|
||||||
|
--bs-black: #000;
|
||||||
|
--bs-white: #fff;
|
||||||
|
--bs-gray: #6c757d;
|
||||||
|
--bs-gray-dark: #343a40;
|
||||||
|
--bs-gray-100: #f8f9fa;
|
||||||
|
--bs-gray-200: #e9ecef;
|
||||||
|
--bs-gray-300: #dee2e6;
|
||||||
|
--bs-gray-400: #ced4da;
|
||||||
|
--bs-gray-500: #adb5bd;
|
||||||
|
--bs-gray-600: #6c757d;
|
||||||
|
--bs-gray-700: #495057;
|
||||||
|
--bs-gray-800: #343a40;
|
||||||
|
--bs-gray-900: #212529;
|
||||||
|
--bs-primary: #0d6efd;
|
||||||
|
--bs-secondary: #6c757d;
|
||||||
|
--bs-success: #198754;
|
||||||
|
--bs-info: #0dcaf0;
|
||||||
|
--bs-warning: #ffc107;
|
||||||
|
--bs-danger: #dc3545;
|
||||||
|
--bs-light: #f8f9fa;
|
||||||
|
--bs-dark: #212529;
|
||||||
|
--bs-primary-rgb: 13, 110, 253;
|
||||||
|
--bs-secondary-rgb: 108, 117, 125;
|
||||||
|
--bs-success-rgb: 25, 135, 84;
|
||||||
|
--bs-info-rgb: 13, 202, 240;
|
||||||
|
--bs-warning-rgb: 255, 193, 7;
|
||||||
|
--bs-danger-rgb: 220, 53, 69;
|
||||||
|
--bs-light-rgb: 248, 249, 250;
|
||||||
|
--bs-dark-rgb: 33, 37, 41;
|
||||||
|
--bs-primary-text-emphasis: #052c65;
|
||||||
|
--bs-secondary-text-emphasis: #2b2f32;
|
||||||
|
--bs-success-text-emphasis: #0a3622;
|
||||||
|
--bs-info-text-emphasis: #055160;
|
||||||
|
--bs-warning-text-emphasis: #664d03;
|
||||||
|
--bs-danger-text-emphasis: #58151c;
|
||||||
|
--bs-light-text-emphasis: #495057;
|
||||||
|
--bs-dark-text-emphasis: #495057;
|
||||||
|
--bs-primary-bg-subtle: #cfe2ff;
|
||||||
|
--bs-secondary-bg-subtle: #e2e3e5;
|
||||||
|
--bs-success-bg-subtle: #d1e7dd;
|
||||||
|
--bs-info-bg-subtle: #cff4fc;
|
||||||
|
--bs-warning-bg-subtle: #fff3cd;
|
||||||
|
--bs-danger-bg-subtle: #f8d7da;
|
||||||
|
--bs-light-bg-subtle: #fcfcfd;
|
||||||
|
--bs-dark-bg-subtle: #ced4da;
|
||||||
|
--bs-primary-border-subtle: #9ec5fe;
|
||||||
|
--bs-secondary-border-subtle: #c4c8cb;
|
||||||
|
--bs-success-border-subtle: #a3cfbb;
|
||||||
|
--bs-info-border-subtle: #9eeaf9;
|
||||||
|
--bs-warning-border-subtle: #ffe69c;
|
||||||
|
--bs-danger-border-subtle: #f1aeb5;
|
||||||
|
--bs-light-border-subtle: #e9ecef;
|
||||||
|
--bs-dark-border-subtle: #adb5bd;
|
||||||
|
--bs-white-rgb: 255, 255, 255;
|
||||||
|
--bs-black-rgb: 0, 0, 0;
|
||||||
|
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||||
|
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||||
|
--bs-body-font-size: 1rem;
|
||||||
|
--bs-body-font-weight: 400;
|
||||||
|
--bs-body-line-height: 1.5;
|
||||||
|
--bs-body-color: #212529;
|
||||||
|
--bs-body-color-rgb: 33, 37, 41;
|
||||||
|
--bs-body-bg: #fff;
|
||||||
|
--bs-body-bg-rgb: 255, 255, 255;
|
||||||
|
--bs-emphasis-color: #000;
|
||||||
|
--bs-emphasis-color-rgb: 0, 0, 0;
|
||||||
|
--bs-secondary-color: rgba(33, 37, 41, 0.75);
|
||||||
|
--bs-secondary-color-rgb: 33, 37, 41;
|
||||||
|
--bs-secondary-bg: #e9ecef;
|
||||||
|
--bs-secondary-bg-rgb: 233, 236, 239;
|
||||||
|
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
|
||||||
|
--bs-tertiary-color-rgb: 33, 37, 41;
|
||||||
|
--bs-tertiary-bg: #f8f9fa;
|
||||||
|
--bs-tertiary-bg-rgb: 248, 249, 250;
|
||||||
|
--bs-heading-color: inherit;
|
||||||
|
--bs-link-color: #0d6efd;
|
||||||
|
--bs-link-color-rgb: 13, 110, 253;
|
||||||
|
--bs-link-decoration: underline;
|
||||||
|
--bs-link-hover-color: #0a58ca;
|
||||||
|
--bs-link-hover-color-rgb: 10, 88, 202;
|
||||||
|
--bs-code-color: #d63384;
|
||||||
|
--bs-highlight-bg: #fff3cd;
|
||||||
|
--bs-border-width: 1px;
|
||||||
|
--bs-border-style: solid;
|
||||||
|
--bs-border-color: #dee2e6;
|
||||||
|
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
|
||||||
|
--bs-border-radius: 0.375rem;
|
||||||
|
--bs-border-radius-sm: 0.25rem;
|
||||||
|
--bs-border-radius-lg: 0.5rem;
|
||||||
|
--bs-border-radius-xl: 1rem;
|
||||||
|
--bs-border-radius-xxl: 2rem;
|
||||||
|
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
|
||||||
|
--bs-border-radius-pill: 50rem;
|
||||||
|
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||||
|
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||||
|
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
||||||
|
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||||
|
--bs-focus-ring-width: 0.25rem;
|
||||||
|
--bs-focus-ring-opacity: 0.25;
|
||||||
|
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
|
||||||
|
--bs-form-valid-color: #198754;
|
||||||
|
--bs-form-valid-border-color: #198754;
|
||||||
|
--bs-form-invalid-color: #dc3545;
|
||||||
|
--bs-form-invalid-border-color: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-bs-theme=dark] {
|
||||||
|
color-scheme: dark;
|
||||||
|
--bs-body-color: #adb5bd;
|
||||||
|
--bs-body-color-rgb: 173, 181, 189;
|
||||||
|
--bs-body-bg: #212529;
|
||||||
|
--bs-body-bg-rgb: 33, 37, 41;
|
||||||
|
--bs-emphasis-color: #fff;
|
||||||
|
--bs-emphasis-color-rgb: 255, 255, 255;
|
||||||
|
--bs-secondary-color: rgba(173, 181, 189, 0.75);
|
||||||
|
--bs-secondary-color-rgb: 173, 181, 189;
|
||||||
|
--bs-secondary-bg: #343a40;
|
||||||
|
--bs-secondary-bg-rgb: 52, 58, 64;
|
||||||
|
--bs-tertiary-color: rgba(173, 181, 189, 0.5);
|
||||||
|
--bs-tertiary-color-rgb: 173, 181, 189;
|
||||||
|
--bs-tertiary-bg: #2b3035;
|
||||||
|
--bs-tertiary-bg-rgb: 43, 48, 53;
|
||||||
|
--bs-primary-text-emphasis: #6ea8fe;
|
||||||
|
--bs-secondary-text-emphasis: #a7acb1;
|
||||||
|
--bs-success-text-emphasis: #75b798;
|
||||||
|
--bs-info-text-emphasis: #6edff6;
|
||||||
|
--bs-warning-text-emphasis: #ffda6a;
|
||||||
|
--bs-danger-text-emphasis: #ea868f;
|
||||||
|
--bs-light-text-emphasis: #f8f9fa;
|
||||||
|
--bs-dark-text-emphasis: #dee2e6;
|
||||||
|
--bs-primary-bg-subtle: #031633;
|
||||||
|
--bs-secondary-bg-subtle: #161719;
|
||||||
|
--bs-success-bg-subtle: #051b11;
|
||||||
|
--bs-info-bg-subtle: #032830;
|
||||||
|
--bs-warning-bg-subtle: #332701;
|
||||||
|
--bs-danger-bg-subtle: #2c0b0e;
|
||||||
|
--bs-light-bg-subtle: #343a40;
|
||||||
|
--bs-dark-bg-subtle: #1a1d20;
|
||||||
|
--bs-primary-border-subtle: #084298;
|
||||||
|
--bs-secondary-border-subtle: #41464b;
|
||||||
|
--bs-success-border-subtle: #0f5132;
|
||||||
|
--bs-info-border-subtle: #087990;
|
||||||
|
--bs-warning-border-subtle: #997404;
|
||||||
|
--bs-danger-border-subtle: #842029;
|
||||||
|
--bs-light-border-subtle: #495057;
|
||||||
|
--bs-dark-border-subtle: #343a40;
|
||||||
|
--bs-heading-color: inherit;
|
||||||
|
--bs-link-color: #6ea8fe;
|
||||||
|
--bs-link-hover-color: #8bb9fe;
|
||||||
|
--bs-link-color-rgb: 110, 168, 254;
|
||||||
|
--bs-link-hover-color-rgb: 139, 185, 254;
|
||||||
|
--bs-code-color: #e685b5;
|
||||||
|
--bs-border-color: #495057;
|
||||||
|
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
||||||
|
--bs-form-valid-color: #75b798;
|
||||||
|
--bs-form-valid-border-color: #75b798;
|
||||||
|
--bs-form-invalid-color: #ea868f;
|
||||||
|
--bs-form-invalid-border-color: #ea868f;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
:root {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--bs-body-font-family);
|
||||||
|
font-size: var(--bs-body-font-size);
|
||||||
|
font-weight: var(--bs-body-font-weight);
|
||||||
|
line-height: var(--bs-body-line-height);
|
||||||
|
color: var(--bs-body-color);
|
||||||
|
text-align: var(--bs-body-text-align);
|
||||||
|
background-color: var(--bs-body-bg);
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin: 1rem 0;
|
||||||
|
color: inherit;
|
||||||
|
border: 0;
|
||||||
|
border-top: var(--bs-border-width) solid;
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6, h5, h4, h3, h2, h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--bs-heading-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: calc(1.375rem + 1.5vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: calc(1.325rem + 0.9vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: calc(1.3rem + 0.6vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h3 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: calc(1.275rem + 0.3vw);
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
h4 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
-webkit-text-decoration: underline dotted;
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
cursor: help;
|
||||||
|
-webkit-text-decoration-skip-ink: none;
|
||||||
|
text-decoration-skip-ink: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
dl {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol ol,
|
||||||
|
ul ul,
|
||||||
|
ol ul,
|
||||||
|
ul ol {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 0.875em;
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
padding: 0.1875em;
|
||||||
|
background-color: var(--bs-highlight-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.75em;
|
||||||
|
line-height: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: var(--bs-font-monospace);
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 0.875em;
|
||||||
|
}
|
||||||
|
pre code {
|
||||||
|
font-size: inherit;
|
||||||
|
color: inherit;
|
||||||
|
word-break: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-size: 0.875em;
|
||||||
|
color: var(--bs-code-color);
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
a > code {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
padding: 0.1875rem 0.375rem;
|
||||||
|
font-size: 0.875em;
|
||||||
|
color: var(--bs-body-bg);
|
||||||
|
background-color: var(--bs-body-color);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
kbd kbd {
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img,
|
||||||
|
svg {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
caption-side: bottom;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
color: var(--bs-secondary-color);
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: inherit;
|
||||||
|
text-align: -webkit-match-parent;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead,
|
||||||
|
tbody,
|
||||||
|
tfoot,
|
||||||
|
tr,
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
border-color: inherit;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus:not(:focus-visible) {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
optgroup,
|
||||||
|
textarea {
|
||||||
|
margin: 0;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[role=button] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
word-wrap: normal;
|
||||||
|
}
|
||||||
|
select:disabled {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type=button],
|
||||||
|
[type=reset],
|
||||||
|
[type=submit] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
button:not(:disabled),
|
||||||
|
[type=button]:not(:disabled),
|
||||||
|
[type=reset]:not(:disabled),
|
||||||
|
[type=submit]:not(:disabled) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
float: right;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: calc(1.275rem + 0.3vw);
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
legend {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
legend + * {
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-datetime-edit-fields-wrapper,
|
||||||
|
::-webkit-datetime-edit-text,
|
||||||
|
::-webkit-datetime-edit-minute,
|
||||||
|
::-webkit-datetime-edit-hour-field,
|
||||||
|
::-webkit-datetime-edit-day-field,
|
||||||
|
::-webkit-datetime-edit-month-field,
|
||||||
|
::-webkit-datetime-edit-year-field {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-inner-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type=search] {
|
||||||
|
outline-offset: -2px;
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="tel"],
|
||||||
|
[type="url"],
|
||||||
|
[type="email"],
|
||||||
|
[type="number"] {
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-color-swatch-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
font: inherit;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
::file-selector-button {
|
||||||
|
font: inherit;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
output {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */
|
|
@ -0,0 +1,939 @@
|
||||||
|
.glightbox-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 999999 !important;
|
||||||
|
overflow: hidden;
|
||||||
|
-ms-touch-action: none;
|
||||||
|
touch-action: none;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-moz-text-size-adjust: 100%;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
text-size-adjust: 100%;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-container.inactive {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-container .gcontainer {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 9999;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-container .gslider {
|
||||||
|
-webkit-transition: -webkit-transform 0.4s ease;
|
||||||
|
transition: -webkit-transform 0.4s ease;
|
||||||
|
transition: transform 0.4s ease;
|
||||||
|
transition: transform 0.4s ease, -webkit-transform 0.4s ease;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box !important;
|
||||||
|
display: -ms-flexbox !important;
|
||||||
|
display: flex !important;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-container .gslide {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-container .gslide.current {
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 99999;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-container .gslide.prev {
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-container .gslide-inner-content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-container .ginner-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-container .ginner-container.gvideo-container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-container .ginner-container.desc-bottom,
|
||||||
|
.glightbox-container .ginner-container.desc-top {
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-container .ginner-container.desc-left,
|
||||||
|
.glightbox-container .ginner-container.desc-right {
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide iframe,
|
||||||
|
.gslide video {
|
||||||
|
outline: none !important;
|
||||||
|
border: none;
|
||||||
|
min-height: 165px;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-touch-action: auto;
|
||||||
|
touch-action: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide:not(.current) {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-image {
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-image img {
|
||||||
|
max-height: 100vh;
|
||||||
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
float: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
max-width: 100vw;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
-o-object-fit: cover;
|
||||||
|
object-fit: cover;
|
||||||
|
-ms-touch-action: none;
|
||||||
|
touch-action: none;
|
||||||
|
margin: auto;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc-top .gslide-image img,
|
||||||
|
.desc-bottom .gslide-image img {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc-left .gslide-image img,
|
||||||
|
.desc-right .gslide-image img {
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-image img.zoomable {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-image img.dragging {
|
||||||
|
cursor: -webkit-grabbing !important;
|
||||||
|
cursor: grabbing !important;
|
||||||
|
-webkit-transition: none;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-video {
|
||||||
|
position: relative;
|
||||||
|
max-width: 100vh;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-video .gvideo-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
/* max-width: 160vmin; */
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-video::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(255, 0, 0, 0.34);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-video.playing::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-video.fullscreen {
|
||||||
|
max-width: 100% !important;
|
||||||
|
min-width: 100%;
|
||||||
|
height: 75vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-video.fullscreen video {
|
||||||
|
max-width: 100% !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-inline {
|
||||||
|
background: #fff;
|
||||||
|
text-align: left;
|
||||||
|
max-height: calc(100vh - 40px);
|
||||||
|
overflow: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-inline .ginlined-content {
|
||||||
|
padding: 20px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-inline .dragging {
|
||||||
|
cursor: -webkit-grabbing !important;
|
||||||
|
cursor: grabbing !important;
|
||||||
|
-webkit-transition: none;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ginlined-content {
|
||||||
|
overflow: auto;
|
||||||
|
display: block !important;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-external {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 75vh;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-media {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoomed .gslide-media {
|
||||||
|
-webkit-box-shadow: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc-top .gslide-media,
|
||||||
|
.desc-bottom .gslide-media {
|
||||||
|
margin: 0 auto;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-description {
|
||||||
|
position: relative;
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-ms-flex: 1 0 100%;
|
||||||
|
flex: 1 0 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-description.description-left,
|
||||||
|
.gslide-description.description-right {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-description.description-bottom,
|
||||||
|
.gslide-description.description-top {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-description p {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslide-description p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoomed .gslide-description {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-button-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Description for mobiles
|
||||||
|
* something like facebook does the description
|
||||||
|
* for the photos
|
||||||
|
*/
|
||||||
|
|
||||||
|
.glightbox-mobile .glightbox-container .gslide-description {
|
||||||
|
height: auto !important;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 19px 11px;
|
||||||
|
max-width: 100vw !important;
|
||||||
|
-webkit-box-ordinal-group: 3 !important;
|
||||||
|
-ms-flex-order: 2 !important;
|
||||||
|
order: 2 !important;
|
||||||
|
max-height: 78vh;
|
||||||
|
overflow: auto !important;
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75)));
|
||||||
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
|
||||||
|
-webkit-transition: opacity 0.3s linear;
|
||||||
|
transition: opacity 0.3s linear;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-mobile .glightbox-container .gslide-title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-mobile .glightbox-container .gslide-desc {
|
||||||
|
color: #a1a1a1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-mobile .glightbox-container .gslide-desc a {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-mobile .glightbox-container .gslide-desc * {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-mobile .glightbox-container .gslide-desc .desc-more {
|
||||||
|
color: #fff;
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gdesc-open .gslide-media {
|
||||||
|
-webkit-transition: opacity 0.5s ease;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gdesc-open .gdesc-inner {
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gdesc-closed .gslide-media {
|
||||||
|
-webkit-transition: opacity 0.5s ease;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greset {
|
||||||
|
-webkit-transition: all 0.3s ease;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gabsolute {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grelative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-desc {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-open {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gloader {
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
-webkit-animation: lightboxLoader 0.8s infinite linear;
|
||||||
|
animation: lightboxLoader 0.8s infinite linear;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
z-index: 9999;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
top: 47%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goverlay {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh + 1px);
|
||||||
|
position: fixed;
|
||||||
|
top: -1px;
|
||||||
|
left: 0;
|
||||||
|
background: #000;
|
||||||
|
will-change: opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-mobile .goverlay {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gprev,
|
||||||
|
.gnext,
|
||||||
|
.gclose {
|
||||||
|
z-index: 99999;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 26px;
|
||||||
|
height: 44px;
|
||||||
|
border: none;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gprev svg,
|
||||||
|
.gnext svg,
|
||||||
|
.gclose svg {
|
||||||
|
display: block;
|
||||||
|
width: 25px;
|
||||||
|
height: auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gprev.disabled,
|
||||||
|
.gnext.disabled,
|
||||||
|
.gclose.disabled {
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gprev .garrow,
|
||||||
|
.gnext .garrow,
|
||||||
|
.gclose .garrow {
|
||||||
|
stroke: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gbtn.focused {
|
||||||
|
outline: 2px solid #0f3d81;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe.wait-autoplay {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-closing .gnext,
|
||||||
|
.glightbox-closing .gprev,
|
||||||
|
.glightbox-closing .gclose {
|
||||||
|
opacity: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*Skin */
|
||||||
|
|
||||||
|
.glightbox-clean .gslide-description {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-clean .gdesc-inner {
|
||||||
|
padding: 22px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-clean .gslide-title {
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: normal;
|
||||||
|
font-family: arial;
|
||||||
|
color: #000;
|
||||||
|
margin-bottom: 19px;
|
||||||
|
line-height: 1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-clean .gslide-desc {
|
||||||
|
font-size: 0.86em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-family: arial;
|
||||||
|
line-height: 1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-clean .gslide-video {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-clean .gprev,
|
||||||
|
.glightbox-clean .gnext,
|
||||||
|
.glightbox-clean .gclose {
|
||||||
|
background-color: rgba(0, 0, 0, 0.75);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-clean .gprev path,
|
||||||
|
.glightbox-clean .gnext path,
|
||||||
|
.glightbox-clean .gclose path {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-clean .gprev {
|
||||||
|
position: absolute;
|
||||||
|
top: -100%;
|
||||||
|
left: 30px;
|
||||||
|
width: 40px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-clean .gnext {
|
||||||
|
position: absolute;
|
||||||
|
top: -100%;
|
||||||
|
right: 30px;
|
||||||
|
width: 40px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-clean .gclose {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
top: 15px;
|
||||||
|
right: 10px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-clean .gclose svg {
|
||||||
|
width: 18px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glightbox-clean .gclose:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*CSS Animations*/
|
||||||
|
|
||||||
|
.gfadeIn {
|
||||||
|
-webkit-animation: gfadeIn 0.5s ease;
|
||||||
|
animation: gfadeIn 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gfadeOut {
|
||||||
|
-webkit-animation: gfadeOut 0.5s ease;
|
||||||
|
animation: gfadeOut 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslideOutLeft {
|
||||||
|
-webkit-animation: gslideOutLeft 0.3s ease;
|
||||||
|
animation: gslideOutLeft 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslideInLeft {
|
||||||
|
-webkit-animation: gslideInLeft 0.3s ease;
|
||||||
|
animation: gslideInLeft 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslideOutRight {
|
||||||
|
-webkit-animation: gslideOutRight 0.3s ease;
|
||||||
|
animation: gslideOutRight 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gslideInRight {
|
||||||
|
-webkit-animation: gslideInRight 0.3s ease;
|
||||||
|
animation: gslideInRight 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gzoomIn {
|
||||||
|
-webkit-animation: gzoomIn 0.5s ease;
|
||||||
|
animation: gzoomIn 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gzoomOut {
|
||||||
|
-webkit-animation: gzoomOut 0.5s ease;
|
||||||
|
animation: gzoomOut 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes lightboxLoader {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes lightboxLoader {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes gfadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gfadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes gfadeOut {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gfadeOut {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes gslideInLeft {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translate3d(-60%, 0, 0);
|
||||||
|
transform: translate3d(-60%, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
visibility: visible;
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gslideInLeft {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translate3d(-60%, 0, 0);
|
||||||
|
transform: translate3d(-60%, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
visibility: visible;
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes gslideOutLeft {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate3d(-60%, 0, 0);
|
||||||
|
transform: translate3d(-60%, 0, 0);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gslideOutLeft {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate3d(-60%, 0, 0);
|
||||||
|
transform: translate3d(-60%, 0, 0);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes gslideInRight {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: visible;
|
||||||
|
-webkit-transform: translate3d(60%, 0, 0);
|
||||||
|
transform: translate3d(60%, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gslideInRight {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: visible;
|
||||||
|
-webkit-transform: translate3d(60%, 0, 0);
|
||||||
|
transform: translate3d(60%, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes gslideOutRight {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate3d(60%, 0, 0);
|
||||||
|
transform: translate3d(60%, 0, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gslideOutRight {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: translate3d(60%, 0, 0);
|
||||||
|
transform: translate3d(60%, 0, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes gzoomIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
||||||
|
transform: scale3d(0.3, 0.3, 0.3);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gzoomIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
||||||
|
transform: scale3d(0.3, 0.3, 0.3);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes gzoomOut {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
||||||
|
transform: scale3d(0.3, 0.3, 0.3);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gzoomOut {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale3d(0.3, 0.3, 0.3);
|
||||||
|
transform: scale3d(0.3, 0.3, 0.3);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 769px) {
|
||||||
|
.glightbox-container .ginner-container {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.glightbox-container .ginner-container.desc-top .gslide-description {
|
||||||
|
-webkit-box-ordinal-group: 1;
|
||||||
|
-ms-flex-order: 0;
|
||||||
|
order: 0;
|
||||||
|
}
|
||||||
|
.glightbox-container .ginner-container.desc-top .gslide-image,
|
||||||
|
.glightbox-container .ginner-container.desc-top .gslide-image img {
|
||||||
|
-webkit-box-ordinal-group: 2;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
.glightbox-container .ginner-container.desc-left .gslide-description {
|
||||||
|
-webkit-box-ordinal-group: 1;
|
||||||
|
-ms-flex-order: 0;
|
||||||
|
order: 0;
|
||||||
|
}
|
||||||
|
.glightbox-container .ginner-container.desc-left .gslide-image {
|
||||||
|
-webkit-box-ordinal-group: 2;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
.gslide-image img {
|
||||||
|
max-height: 97vh;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.gslide-image img.zoomable {
|
||||||
|
cursor: -webkit-zoom-in;
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
.zoomed .gslide-image img.zoomable {
|
||||||
|
cursor: -webkit-grab;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
.gslide-inline {
|
||||||
|
max-height: 95vh;
|
||||||
|
}
|
||||||
|
.gslide-external {
|
||||||
|
max-height: 100vh;
|
||||||
|
}
|
||||||
|
.gslide-description.description-left,
|
||||||
|
.gslide-description.description-right {
|
||||||
|
max-width: 275px;
|
||||||
|
}
|
||||||
|
.glightbox-open {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.goverlay {
|
||||||
|
background: rgba(0, 0, 0, 0.92);
|
||||||
|
}
|
||||||
|
.glightbox-clean .gslide-media {
|
||||||
|
-webkit-box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
|
||||||
|
box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
|
||||||
|
}
|
||||||
|
.glightbox-clean .description-left .gdesc-inner,
|
||||||
|
.glightbox-clean .description-right .gdesc-inner {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.glightbox-clean .gprev,
|
||||||
|
.glightbox-clean .gnext,
|
||||||
|
.glightbox-clean .gclose {
|
||||||
|
background-color: rgba(0, 0, 0, 0.32);
|
||||||
|
}
|
||||||
|
.glightbox-clean .gprev:hover,
|
||||||
|
.glightbox-clean .gnext:hover,
|
||||||
|
.glightbox-clean .gclose:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
.glightbox-clean .gprev {
|
||||||
|
top: 45%;
|
||||||
|
}
|
||||||
|
.glightbox-clean .gnext {
|
||||||
|
top: 45%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.glightbox-clean .gclose {
|
||||||
|
opacity: 0.7;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-height: 420px) {
|
||||||
|
.goverlay {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,173 @@
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||||
|
|
||||||
|
<title>AcuGIS | OpenTileServer</title>
|
||||||
|
<meta content="" name="description">
|
||||||
|
<meta content="" name="keywords">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link href="assets/img/favicon.ico" rel="icon">
|
||||||
|
|
||||||
|
<!-- Google Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||||
|
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
|
||||||
|
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
|
||||||
|
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||||
|
<link href="assets/css/style.css" rel="stylesheet">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<header id="header" class="header d-flex align-items-center" style="background-color:#28728d">
|
||||||
|
|
||||||
|
<div class="container-fluid container-xl d-flex align-items-center justify-content-between">
|
||||||
|
<a href="index.html" class="logo d-flex align-items-center">
|
||||||
|
|
||||||
|
<h1>AcuGIS</h1>
|
||||||
|
</a>
|
||||||
|
<nav id="navbar" class="navbar">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#" class="active">Dashboard</a></li>
|
||||||
|
|
||||||
|
<li><a href="/latest" target="_blank">Docs</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
|
||||||
|
<i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<section id="hero" class="hero" style="background-color:#28728d">
|
||||||
|
<div class="container position-relative">
|
||||||
|
<div class="row gy-5" data-aos="fade-in">
|
||||||
|
<div class="col-lg-6 order-2 order-lg-1 d-flex flex-column justify-content-center text-center text-lg-start">
|
||||||
|
<h2><span style="font-size:70px">OpenStreetMap<br>Server</span></h2>
|
||||||
|
<p> Build a Tile Server with OpenStreetMap data</p>
|
||||||
|
<div class="d-flex justify-content-center justify-content-lg-start">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 order-1 order-lg-2">
|
||||||
|
<img src="assets/img/pg_layers.png" class="img-fluid" alt="" data-aos="zoom-out" data-aos-delay="100" >
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p> </p> <p> </p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<main id="main">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
<footer id="footer" class="footer" style="background-color:#28728d">
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="row gy-4">
|
||||||
|
<div class="col-lg-3 col-md-12 footer-info">
|
||||||
|
<a href="/latest" class="logo d-flex align-items-center">
|
||||||
|
<span>Get Started</span>
|
||||||
|
</a>
|
||||||
|
<p>Get started with OpenTileServerr</p>
|
||||||
|
<div class="social-links d-flex mt-4">
|
||||||
|
<a href="https://github.com/AcuGIS/OpenTileServer" class="twitter"><i class="bi bi-github"></i></a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-2 col-6 footer-links">
|
||||||
|
<h4>Leaflet</h4>
|
||||||
|
<ul>
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="leaflet-example.html" target="_blank">Leaflet Example</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-2 col-6 footer-links">
|
||||||
|
<h4>OpenLayers</h4>
|
||||||
|
<ul>
|
||||||
|
|
||||||
|
<li><a href="openlayers-example.html" target="_blank">OpenLayers Example</a></li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="col-lg-2 col-6 footer-links">
|
||||||
|
<h4>GeoFabrik</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://download.geofabrik.de/" target="_blank">PBF Downloads</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="col-lg-2 col-6 footer-links">
|
||||||
|
<h4>OpenSteetMap</h4>
|
||||||
|
<ul>
|
||||||
|
|
||||||
|
<li><a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container mt-4">
|
||||||
|
<div class="copyright">
|
||||||
|
© 2023 <strong><span>AcuGIS</span></strong>. Cited, Inc. All Rights Reserved
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<a href="#" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="assets/vendor/aos/aos.js"></script>
|
||||||
|
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
|
||||||
|
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
|
||||||
|
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
|
||||||
|
<script src="assets/js/web.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|