Initial Commit
This commit is contained in:
parent
ae42445108
commit
d59fb91476
AUTHORS.rstCONTRIBUTING.rstindex.html
Docker
README.mdapp
assets
css
img
apple-touch-icon.pngfavicon.icofavicon.pnggeohelm-wheel.pnggetstarted_img.pngmap.pngopnenamesearch.pngpg_layers.pngpg_layers2.png
js
style.cssvendor
aos
bootstrap-icons
bootstrap
css
bootstrap-grid.cssbootstrap-grid.css.mapbootstrap-grid.min.cssbootstrap-grid.min.css.mapbootstrap-grid.rtl.cssbootstrap-grid.rtl.css.mapbootstrap-grid.rtl.min.cssbootstrap-grid.rtl.min.css.mapbootstrap-reboot.cssbootstrap-reboot.css.mapbootstrap-reboot.min.cssbootstrap-reboot.min.css.mapbootstrap-reboot.rtl.cssbootstrap-reboot.rtl.css.mapbootstrap-reboot.rtl.min.cssbootstrap-reboot.rtl.min.css.mapbootstrap-utilities.cssbootstrap-utilities.css.mapbootstrap-utilities.min.cssbootstrap-utilities.min.css.mapbootstrap-utilities.rtl.cssbootstrap-utilities.rtl.css.mapbootstrap-utilities.rtl.min.cssbootstrap-utilities.rtl.min.css.mapbootstrap.cssbootstrap.css.mapbootstrap.min.cssbootstrap.min.css.mapbootstrap.rtl.cssbootstrap.rtl.css.mapbootstrap.rtl.min.cssbootstrap.rtl.min.css.map
js
glightbox
isotope-layout
purecounter
swiper
|
@ -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
126
README.md
|
@ -1,2 +1,126 @@
|
|||
# OpenTileServer
|
||||
# OpenStreetMap Server
|
||||
|
||||
## Build an OpenStreetMap Server
|
||||
|
||||

|
||||
|
||||
|
||||
* Project page: https://www.acugis.com/opentileserver
|
||||
* Documentation: https://www.acugis.com/opentileserver/docs
|
||||
|
||||
[](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:
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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;
|
||||
}
|
Binary file not shown.
After ![]() (image error) Size: 1.7 KiB |
Binary file not shown.
After Width: 16px | Height: 16px | Size: 1.1 KiB |
Binary file not shown.
After ![]() (image error) Size: 491 B |
Binary file not shown.
After ![]() (image error) Size: 147 KiB |
Binary file not shown.
After ![]() (image error) Size: 89 KiB |
Binary file not shown.
After ![]() (image error) Size: 66 KiB |
Binary file not shown.
After ![]() (image error) Size: 79 KiB |
Binary file not shown.
After ![]() (image error) Size: 109 KiB |
Binary file not shown.
After ![]() (image error) 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;
|
File diff suppressed because one or more lines are too long
|
@ -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;
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,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 */
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,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 */
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,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;
|
||||
}
|
||||
}
|
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,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>
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue