diff --git a/README.md b/README.md index 98489ce..50d7a7d 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,56 @@ +1. [Mabasej team project](#mabasej_team) +2. [App](#app) + 1. [Installation from apk](#install) +4. [Server](#server) + 1. [Install .img (RPI) server+web+computer_vision](#image-install) + 2. [Install script (DietPi, work in progress) server](#script-install) + 3. [Install manually (work in progress)](#manual-install) + 4. [Server filesystem](#server-filesystem) + 5. [filesystem.json](#filesystem) + 6. [settings.json](#settings) + # Mabasej_Team We are working on system, that will help tourists in cities to get information about city more easily. +| Part of project | State | Available for easy install | Comments | +| :-------------- | :---- | :------------------------: | :------: | +| Server | Working | 🟢 | Fully working if config is correct | +| Computer Vision Plugin | Working | 🟢 | | +| Web | Demo Working | 🟠 | | +| Android app | Working | 🟢 | 🟠manual server ip🟠 | -## Hardware -- Raspberry PI (for now tested only on rpi4. Works on rpi zero too, but it will be slow if more devices are connected) -- External/Internal WiFi antena -## Software -- python 3.9.2 compatible server with basic web interface -- Kotlin based mobile app +# App +Is programmed in android studio (kotlin) +It is based on simple interface with only few buttons, but lot of informations: +- Home- *Shows contents of the server that the user is connected to* +- Explore- *Shows all servers in list with small description and photo.* *User can acces map locations of server or all informations about server* +- Map- *Map that contains pins from all servers and user can open server info from here.* *Also it is possible to start navigation with google maps from here* +- Chat- *Users connected to same server can chat here* +- Settings- *Simple settings for theme and hidden debug menu* ## Install -Wikispot is in testing stages, but it is possible to install it using our .img file (link coming soon) based on DietPi or custom script. +Requirements: +- Android 6 and newer +- [WikiSpot.apk](https://github.com/Tucan444/Mabasej_Team/releases/tag/V1.0) + +Steps: + +1. Download `wikispot.apk` to your mobile and install it. (you will probablly need to enable installing apps from your browser) +2. After instalation open app and go to settings. +3. Click on the top right corner and debug menu should show up. +4. Change ip to your server ip and chose `CHANGE URL` +5. Chose `Home` menu and you should see your server. + +⚠️ Because of android limitations we were not able to do automatic connection, but we are working on workaround ⚠️ + + + +# Server +Wikispot is in testing stages, but it is possible to install it using our [.img file](https://github.com/Tucan444/Mabasej_Team/releases/tag/V1.0) based on DietPi or custom script. | Device | Server compatible | Instalation | | :-------------------- | :------------------------------------------------------------------------------------------ | :-----------: | -| Ubuntu (I7, 16GB ram) | :heavy_check_mark: WORKING (Only server) | Manual/script | +| Ubuntu (I7, 16GB ram) | :heavy_check_mark: WORKING (Only server automated setup) | Manual/script | | RPI 4b (2GB) | :heavy_check_mark: WORKING | .img/script | | RPI 400 (4GB) | :grey_question: Untested. Should work. | .img/script | | RPI 3b+ | :grey_question: Untested. Should work. | .img/script | @@ -23,17 +59,18 @@ Wikispot is in testing stages, but it is possible to install it using our .img f | RPI | :question: Untested. | :x: | -### Fresh istall (.img) Only RPI +## image install + login credentials > login: dietpi -> password: WikiSpot2021 +> password: WikiSpot requirements: -1. WikiSpot image file (download: *soon*) +1. [WikiSpot image file](https://github.com/Tucan444/Mabasej_Team/releases/tag/V1.0) 2. MicroSd card (recommended: >=16GB, :exclamation: ALL DATA STORED ON SD CARD WILL BE FORMATED :exclamation:) -3. BalenaEtcher (or another sd card flasher) *link:* https://www.balena.io/etcher/ +3. [BalenaEtcher](https://www.balena.io/etcher/) (or another sd card flasher) *link:* https://www.balena.io/etcher/ 4. SD card reader @@ -54,15 +91,16 @@ Install: 8. Done you can start using WikiSpot and edit contents of WikiSpot with our app (*coming soon*) -### Script install +## Script install *coming soon* -### Manual install +## Manual install *coming soon* ## Server filesystem +Tree view of server ``` └── test_directory @@ -85,6 +123,7 @@ Install: ### filesystem +File: `filesystem.json` ``` { @@ -120,7 +159,8 @@ and add record for file into `files` list in `filesystem.json`. :exclamation:do ``` -### settings.json +### settings +File: `settings.json` ``` { diff --git a/new new files/files/Jedálny lístok.pdf b/new new files/files/Jedálny lístok.pdf new file mode 100644 index 0000000..b2f9a3b Binary files /dev/null and b/new new files/files/Jedálny lístok.pdf differ diff --git a/new new files/files/Podrobnosti.txt b/new new files/files/Podrobnosti.txt new file mode 100644 index 0000000..d01f545 --- /dev/null +++ b/new new files/files/Podrobnosti.txt @@ -0,0 +1,22 @@ +Vybavenie + +Šatňa - áno +Vlastné parkovisko - áno +Televízor - áno + +Pre rodiny s deťmi + +Detské stoličky - áno +detský kútik - áno + +Služby + +Čapované pivo - áno +Organizovanie spoločenských podujatí – áno +Koktail bar - áno + +Kontakt + +Adresa: Dlhá 58 , 095 01 Senica +Telefón: +421 +Email: restauracia.kojda@gmail.com \ No newline at end of file diff --git a/new new files/files/restaurant_in.jpg b/new new files/files/restaurant_in.jpg new file mode 100644 index 0000000..9442184 Binary files /dev/null and b/new new files/files/restaurant_in.jpg differ diff --git a/new new files/files/restaurant_out.jpg b/new new files/files/restaurant_out.jpg new file mode 100644 index 0000000..a3b1ab2 Binary files /dev/null and b/new new files/files/restaurant_out.jpg differ diff --git a/new new files/files1/Cenník.pdf b/new new files/files1/Cenník.pdf new file mode 100644 index 0000000..f5fb310 Binary files /dev/null and b/new new files/files1/Cenník.pdf differ diff --git a/new new files/files1/Podrobnosti.txt b/new new files/files1/Podrobnosti.txt new file mode 100644 index 0000000..e857edd --- /dev/null +++ b/new new files/files1/Podrobnosti.txt @@ -0,0 +1,17 @@ +Otváracie hodiny: +PON-PIA: 09:00 - 17:00 +SOB: zatvorené +NED: 10:00-16:00 + +13:00-13:30 (obedná prestávka) + +- Predaj doplnkového tovaru +- Výmena peňazí +- Telekomunikačné služby +- predplatné novín a časopisov + +Kontakt + +Adresa: Športovcov 7212, 017 01 Považská Bystrica +Telefón: 0918 221 189 +email: slovenska.posta@gmail.com \ No newline at end of file diff --git a/new new files/files1/post_out.jpg b/new new files/files1/post_out.jpg new file mode 100644 index 0000000..9d67469 Binary files /dev/null and b/new new files/files1/post_out.jpg differ diff --git a/new new files/files1/posta_in.jpg b/new new files/files1/posta_in.jpg new file mode 100644 index 0000000..213a646 Binary files /dev/null and b/new new files/files1/posta_in.jpg differ diff --git a/new new files/files2/Bazény a cenník.pdf b/new new files/files2/Bazény a cenník.pdf new file mode 100644 index 0000000..d315fc7 Binary files /dev/null and b/new new files/files2/Bazény a cenník.pdf differ diff --git a/new new files/files2/Služby a kontakt.txt b/new new files/files2/Služby a kontakt.txt new file mode 100644 index 0000000..2f7eba0 --- /dev/null +++ b/new new files/files2/Služby a kontakt.txt @@ -0,0 +1,23 @@ +Služby + +- Plavecký bazén +- Relaxačný bazén +- Detský bazén + +Sauna + +- fínska +- ruská +- turecká +- bylinková +- infra sauna + + +- Masáže + +Kontakt + +Adresa: Mládežnícka 12, +017 01 Považská Bystrica + +Telefón: 032/221 52 97 \ No newline at end of file diff --git a/new new files/files2/plavaren_in.jpg b/new new files/files2/plavaren_in.jpg new file mode 100644 index 0000000..4e98241 Binary files /dev/null and b/new new files/files2/plavaren_in.jpg differ diff --git a/new new files/files2/plavaren_out.jpg b/new new files/files2/plavaren_out.jpg new file mode 100644 index 0000000..651e261 Binary files /dev/null and b/new new files/files2/plavaren_out.jpg differ diff --git a/new new files/files3/Cenník.pdf b/new new files/files3/Cenník.pdf new file mode 100644 index 0000000..27c6121 Binary files /dev/null and b/new new files/files3/Cenník.pdf differ diff --git a/new new files/files3/Náhľad.pdf b/new new files/files3/Náhľad.pdf new file mode 100644 index 0000000..68fbe1c Binary files /dev/null and b/new new files/files3/Náhľad.pdf differ diff --git a/new new files/files3/muzeum_in.jpg b/new new files/files3/muzeum_in.jpg new file mode 100644 index 0000000..7d330f4 Binary files /dev/null and b/new new files/files3/muzeum_in.jpg differ diff --git a/new new files/files3/muzeum_out.jpg b/new new files/files3/muzeum_out.jpg new file mode 100644 index 0000000..adf6ee0 Binary files /dev/null and b/new new files/files3/muzeum_out.jpg differ diff --git a/new new files/files4/Podrobnosti.txt b/new new files/files4/Podrobnosti.txt new file mode 100644 index 0000000..d1526f6 --- /dev/null +++ b/new new files/files4/Podrobnosti.txt @@ -0,0 +1,18 @@ +Služby na stanici: + +- Bezplatné parkovanie +- Poistenie na počkanie +- Predaj cestovných lístkov +- Predaj miesteniek +- Rezervácie +- Predaj žrebov Niké + +Kontakt + +Adresa: Zámostie, 017 01 Považská Bystrica + +Telefón +Slovensko: 18 188 +Zo zahraničia: +421 24 28 54 182 + +info@slovakrail.sk \ No newline at end of file diff --git a/new new files/files4/Zľavy.pdf b/new new files/files4/Zľavy.pdf new file mode 100644 index 0000000..81b0ac2 Binary files /dev/null and b/new new files/files4/Zľavy.pdf differ diff --git a/new new files/files4/zeleznicna_stanica_in.jpg b/new new files/files4/zeleznicna_stanica_in.jpg new file mode 100644 index 0000000..4bac6ff Binary files /dev/null and b/new new files/files4/zeleznicna_stanica_in.jpg differ diff --git a/new new files/files4/zeleznicna_stanica_out.jpg b/new new files/files4/zeleznicna_stanica_out.jpg new file mode 100644 index 0000000..c6e891f Binary files /dev/null and b/new new files/files4/zeleznicna_stanica_out.jpg differ diff --git a/new new files/filesystem.json b/new new files/filesystem.json new file mode 100644 index 0000000..7225978 --- /dev/null +++ b/new new files/filesystem.json @@ -0,0 +1,24 @@ +{ + "ID": 0, + "location": "49.14178021389778,18.353783098441415", + "description": { + "title": "Reštaurácia pod slivkou", + "description_s": "Otvorené", + "description_l": "Otváracie hodiny:\nPON-PIA: 09:00 - 22:00\nSOB: zatvorené\nNED: 14:00-21:00", + "photo_s": "restaurant_out.jpg", + "photo_b": "restaurant_in.jpg", + "email": "restauracia.podslivkou@gmail.com", + "phone_number": "0928229120" + }, + "files": [ + { + "name": "Podrobnosti", + "format": ".txt", + "description": "Vybavenie, služby a kontakt" + }, { + "name": "Jedálny lístok", + "format": ".pdf", + "description": "" + } + ] +} diff --git a/new new files/filesystem1.json b/new new files/filesystem1.json new file mode 100644 index 0000000..323552f --- /dev/null +++ b/new new files/filesystem1.json @@ -0,0 +1,24 @@ +{ + "ID": 1, + "location": "49.095721799569304, 18.47399399775766", + "description": { + "title": "Slovenská pošta", + "description_s": "Otvorené", + "description_l": "Otváracie hodiny:\nPON-PIA: 09:00 - 17:00\nSOB: zatvorené\nNED: 10:00-16:00", + "photo_s": "post_out.jpg", + "photo_b": "post_in.jpg", + "email": "slovenska.posta@gmail.com", + "phone_number": "0918221189" + }, + "files1": [ + { + "name": "Podrobnosti", + "format": ".txt", + "description": "" + }, { + "name": "Cenník", + "format": ".pdf", + "description": "" + } + ] +} diff --git a/new new files/filesystem2.json b/new new files/filesystem2.json new file mode 100644 index 0000000..d3e0199 --- /dev/null +++ b/new new files/filesystem2.json @@ -0,0 +1,24 @@ +{ + "ID": 2, + "location": "49.14437583832675, 18.466946907073503", + "description": { + "title": "Mestská plaváreň", + "description_s": "Otvorené", + "description_l": "Otvorené nonstop\nOtváracie doby sa počas sviatkov môžu líšiť", + "photo_s": "plavaren_out.jpg", + "photo_b": "plavaren_in.jpg", + "email": "", + "phone_number": "0322215297" + }, + "files2": [ + { + "name": "Služby a kontakt", + "format": ".txt", + "description": "" + }, { + "name": "Fotogaléria a cenník", + "format": ".pdf", + "description": "" + } + ] +} diff --git a/new new files/filesystem3.json b/new new files/filesystem3.json new file mode 100644 index 0000000..c04f35d --- /dev/null +++ b/new new files/filesystem3.json @@ -0,0 +1,24 @@ +{ + "ID": 3, + "location": "49.10101907820781, 18.440001048091226", + "description": { + "title": "Považsko Bystrické Múzeum", + "description_s": "Otvorené", + "description_l": "Otváracie hodiny:\nUT-PIA: 08:00 - 16:00", + "photo_s": "muzeum_out.jpg", + "photo_b": "muzeum_in.jpg", + "email": "pbmuzeum@gmail.com", + "phone_number": "0971294689" + }, + "files3": [ + { + "name": "Cenník", + "format": ".pdf", + "description": "" + }, { + "name": "Náhľad", + "format": ".pdf", + "description": "Nahľiadnite do expozície múzea" + } + ] +} diff --git a/new new files/filesystem4.json b/new new files/filesystem4.json new file mode 100644 index 0000000..3979635 --- /dev/null +++ b/new new files/filesystem4.json @@ -0,0 +1,24 @@ +{ + "ID": 4, + "location": "49.12230758939453, 18.43195784744756", + "description": { + "title": "Železničná stanica", + "description_s": "Otvorené", + "description_l": "Otváracie hodiny:\nnonstop", + "photo_s": "zeleznicna_stanica_out.jpg", + "photo_b": "zeleznicna_stanica_in.jpg", + "email": "info@slovakrail.sk", + "phone_number": "" + }, + "files4": [ + { + "name": "Podrobnosti", + "format": ".txt", + "description": "" + }, { + "name": "Zľavy", + "format": ".pdf", + "description": "" + } + ] +} diff --git a/server/cache/1/test.jpg b/server/cache/1/test.jpg deleted file mode 100644 index 7777c36..0000000 Binary files a/server/cache/1/test.jpg and /dev/null differ diff --git a/server/main.py b/server/main.py index 743d05d..243c395 100644 --- a/server/main.py +++ b/server/main.py @@ -58,8 +58,6 @@ IP = get_my_ip() ID = filesystem["ID"] location = filesystem["location"] time_to_save = settings["time_to_save"] -settings["location"] -settings["ID"] app = FastAPI() # init of FastAPI origins = ["*", ] @@ -90,7 +88,14 @@ if ID not in heartbeat_table["ID"]: heartbeat_table["location"].append(location) heartbeat_table["file_system"].append(filesystem) heartbeat_table["last_heartbeat"].append(time_to_heartbeat) +else: + index_server_run = heartbeat_table["ID"].index(ID) + heartbeat_table["IP"][index_server_run] = IP + heartbeat_table["location"][index_server_run] = location + heartbeat_table["file_system"][index_server_run] = filesystem + heartbeat_table["last_heartbeat"][index_server_run] = time_to_heartbeat +heartbeat_table["my_ip"] = IP class ServerTable(BaseModel): # table of content for heartbeat request ID: list @@ -98,6 +103,7 @@ class ServerTable(BaseModel): # table of content for heartbeat request location: list file_system: list last_heartbeat: list + my_ip: str class Sensor(BaseModel): @@ -117,7 +123,8 @@ def read_root(): @app.post("/heartbeat") def heartbeat(s_table: ServerTable, request: Request): - log.message(f"server requested heartbeat {request.client.host}:{request.client.port}") + global heartbeat_table + log.message(f"server requested heartbeat {s_table.my_ip}:{request.client.port}") log.debug(f"Recieved server table: {s_table}") try: @@ -133,8 +140,8 @@ def heartbeat(s_table: ServerTable, request: Request): elif server_id == ID: log.debug(f"Updated my heartbeat from {s_table.last_heartbeat[position]} to {time_to_heartbeat}") heartbeat_table["last_heartbeat"][heartbeat_table["ID"].index(ID)] = time_to_heartbeat - else: - log.message(f"Heartbeat from new server:\n ID: {server_id} IP: {request.client}") + elif server_id not in heartbeat_table["ID"]: + log.message(f"Heartbeat from new server:\n ID: {server_id} IP: {s_table.my_ip}") heartbeat_table["ID"].append(int(s_table.ID[position])) heartbeat_table["IP"].append(s_table.IP[position]) heartbeat_table["location"].append(s_table.location[position]) @@ -143,10 +150,12 @@ def heartbeat(s_table: ServerTable, request: Request): log.debug(f"Created {server_id}`s heartbeat: {s_table.last_heartbeat[position]}") except Exception as error: log.error(f"heartbeat > {error}") - - if heartbeat_table["ID"][heartbeat_table["IP"].index(request.client.host)] in offline: - offline.remove(heartbeat_table["ID"][heartbeat_table["IP"].index(request.client.host)]) - log.warning(f"{request.client.host} gone online") + try: + if heartbeat_table["ID"][heartbeat_table["IP"].index(s_table.my_ip)] in offline: + offline.remove(heartbeat_table["ID"][heartbeat_table["IP"].index(s_table.my_ip)]) + log.warning(f"{s_table.my_ip} gone online") + except Exception as error: + log.error(f"heartbeat > {error}") return heartbeat_table, {"ID": ID, "file_system": filesystem, "location": location} @@ -170,7 +179,6 @@ def get_sensors(IDx: int, request: Request): @app.get("/files/{IDx}/{file}") def get_file(IDx: int, file: str, request: Request): log.debug(f"""{request.client} requested {file} from {"this server" if IDx == ID else f"id {IDx}"}""") - server_ip = heartbeat_table["IP"][heartbeat_table["ID"].index(IDx)] if IDx == ID: if os.path.isfile(f"files/{file}"): return FileResponse(f"files/{file}") @@ -181,6 +189,7 @@ def get_file(IDx: int, file: str, request: Request): log.warning(f"{request.client} tried to access id ({IDx}) that does not exist.") return f"ERROR: {IDx} does not exist." else: + server_ip = heartbeat_table["IP"][heartbeat_table["ID"].index(IDx)] if os.path.isdir(f"cache/{IDx}"): if os.path.isfile(f"cache/{IDx}/{file}"): with open(f"cache/{IDx}/{file}", "rb") as compared_file: @@ -213,7 +222,7 @@ def get_file(IDx: int, file: str, request: Request): @app.post("/{IDx}/update_sensor") def update_sensors(data: Sensor, request: Request, IDx: int): global sensors - if IDx == ID: + if IDx == ID or IDx == -1: if data.name in sensors: if not data.value: log.message(f"{request.client.host} removed sensor {data.name}") @@ -225,10 +234,12 @@ def update_sensors(data: Sensor, request: Request, IDx: int): log.warning(f"{request.client} created new sensor.\n SENSOR: {data}") sensors[data.name] = data.value return f"Successfuly made new sensor" - else: + elif IDx in heartbeat_table["ID"]: r = requests.post(f"""http://{heartbeat_table["IP"][heartbeat_table["ID"].index(IDx)]}:8000/{IDx}/update_sensor""", json={"name": data.name, "value": data.value}) return r.text + else: + return f"ERROR: server {IDx} does not exist." @app.get("/compare/{file}") diff --git a/websites/.vscode/launch.json b/website/.vscode/launch.json similarity index 100% rename from websites/.vscode/launch.json rename to website/.vscode/launch.json diff --git a/website/BUTTON-d-5.png b/website/BUTTON-d-5.png new file mode 100644 index 0000000..37adbc6 Binary files /dev/null and b/website/BUTTON-d-5.png differ diff --git a/website/GitHub-Mark-64px.png b/website/GitHub-Mark-64px.png new file mode 100644 index 0000000..182a1a3 Binary files /dev/null and b/website/GitHub-Mark-64px.png differ diff --git a/website/GitHub-Mark-Light-32px.png b/website/GitHub-Mark-Light-32px.png new file mode 100644 index 0000000..628da97 Binary files /dev/null and b/website/GitHub-Mark-Light-32px.png differ diff --git a/website/GitHub-Mark-Light-64px.png b/website/GitHub-Mark-Light-64px.png new file mode 100644 index 0000000..73db1f6 Binary files /dev/null and b/website/GitHub-Mark-Light-64px.png differ diff --git a/website/WikiSpot.html b/website/WikiSpot.html new file mode 100644 index 0000000..c27921b --- /dev/null +++ b/website/WikiSpot.html @@ -0,0 +1,39 @@ + + + + WikiSpot + + + + + + + + +
+ +
+ +
+
SŤIAHNUŤ
+ +
+ + \ No newline at end of file diff --git a/websites/WikiSpotCSS.css b/website/WikiSpotCSS.css similarity index 69% rename from websites/WikiSpotCSS.css rename to website/WikiSpotCSS.css index 49bb271..51e0f2e 100644 --- a/websites/WikiSpotCSS.css +++ b/website/WikiSpotCSS.css @@ -4,6 +4,8 @@ header { } body { background-image: url(header-background.jpg); + background-repeat: no-repeat; + background-attachment: fixed; margin: 0; user-select: none; } @@ -14,6 +16,7 @@ body { display: flex; justify-content: flex-end; align-items: center; + flex-direction: row; } .item { list-style: none; @@ -25,6 +28,7 @@ body { margin-left: 1.3rem; } .itemImg { + cursor: pointer; margin-right: auto; margin-left: 1.3rem; } @@ -34,7 +38,7 @@ body { font-size: 20px; } .list li:hover { - color: chartreuse; + color: rgba(255, 255, 255, 0.418); transition: color 0.2s ease-in-out; } .wsImg { @@ -58,6 +62,9 @@ body { display: none; } @media (max-width: 800px) { + #githubImg { + display: none; + } .item { display: none; } @@ -84,31 +91,57 @@ body { } /* ---------- Hlavná stránka ---------- */ #downloadHolder { - margin-top: 5%; - margin-left: 25%; + margin-top: 10px; + margin-left: 35%; display: flex; justify-content: space-between; width: 550px; align-items: center; } -#download { +#appDownload { cursor: pointer; background-color: none; color: white; border: 4px white solid; border-radius: 50px; + margin-right: 0px; width: auto; - height: 20px; + height: 30px; padding: 10px; position: static; - font-size: 20px; + font-size: 25px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + transition: background-color 0.5s, color 0.5s; } -#download:hover { +#appDownload:hover { background-color: white; color: rgb(47, 40, 150) ; } #phoneImg { width: 350px; + height: auto; +} +#conHolder { + width: 500px; + height: 500px; + margin-top: 15%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; +} +/* ---------- O projekte ---------- */ +#projectInfo { + position: absolute; + top: 250px; + left: 450px; + background-color: rgba(255, 255, 255, 0.322); + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + color: rgb(255, 255, 255); + padding: 15px; + border-radius: 20px; + width: 470px; + height: auto; + font-size: 40px; } \ No newline at end of file diff --git a/websites/index.html b/website/WikiSpotPro.html similarity index 77% rename from websites/index.html rename to website/WikiSpotPro.html index cd0c55c..6129d72 100644 --- a/websites/index.html +++ b/website/WikiSpotPro.html @@ -7,16 +7,17 @@ +
-
-
SŤIAHNUŤ ▼
-
-
+
+ \ No newline at end of file diff --git a/website/WikiSpotWS.html b/website/WikiSpotWS.html new file mode 100644 index 0000000..c619e5a --- /dev/null +++ b/website/WikiSpotWS.html @@ -0,0 +1,37 @@ + + + + + + + + WikiSpot + + + +
+ +
+ + + + + + \ No newline at end of file diff --git a/website/about.js b/website/about.js new file mode 100644 index 0000000..7cbe6aa --- /dev/null +++ b/website/about.js @@ -0,0 +1,10 @@ +$(document).ready(function(){ + $.get("test.txt", function(data){ + console.log(data); + let data_string = data.toString(); + + data_string.replace(new RegExp("\\\\n", "g"), "*"); + console.log(JSON.stringify(data_string)); + $("#projectInfo").html(data_string); + }); +}); \ No newline at end of file diff --git a/websites/app.css b/website/app.css similarity index 60% rename from websites/app.css rename to website/app.css index 22f4852..f694645 100644 --- a/websites/app.css +++ b/website/app.css @@ -6,6 +6,8 @@ body { background-image: url(header-background.jpg); margin: 0; user-select: none; + background-repeat: no-repeat; + background-attachment: fixed; } /* ---------- Navigačná lišta (navbar) ---------- */ .list { @@ -25,6 +27,7 @@ body { margin-left: 1.3rem; } .itemImg { + cursor: pointer; margin-right: auto; margin-left: 1.3rem; } @@ -34,15 +37,9 @@ body { font-size: 20px; } .list li:hover { - color: chartreuse; + color: rgba(75, 61, 204, 0.459); transition: color 0.2s ease-in-out; } -.wsImg { - border-radius: 10px; -} -.wsImg:first-child { - margin-right: auto; -} /* ---------- Burger Menu ---------- */ .burger { cursor: pointer; @@ -161,22 +158,31 @@ body { flex-direction: row; justify-content: flex-end; } -.klol { +.short_description { + width: 300px; +} +.list_item_holder { display: flex; - flex-direction: row; - justify-content: flex-end; + flex-direction: column; + justify-content: space-between; + margin-top: 5px; + margin-right: 71px; margin-bottom: 10px; margin-left: 10px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } -.constantImg { - grid-area: obrazok; +.sens_style_heat { + grid-area: senzory; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 20px; display: flex; - width: 300px; - height: 300px; - top: 250px; - left: 50px; - transition: display 1s 1s; + align-items: center; + flex-direction: column; + +} +.wsImg { + border-radius: 10px; + margin-right: auto; } .mystyle { transform: rotate(180deg); @@ -194,24 +200,66 @@ body { transition: transform 0.5s ease-in-out; } /* ---------- Grid Layout ---------- */ -.obrazok { +.obrazok_small { grid-area: obrazok; - width: 500px; + display: flex; + align-items: center; + flex-direction: column; + width: 100px; + height: 100px; + margin-left: 25px; + border-radius: 10px; + transition: display 1s 1s; +} +.obrazok_big { + grid-area: obrazok; + width: 400px; height: 300px; + margin-left: 0px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + +} +.text_small { + grid-area: description; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + display: flex; + justify-content: center; + flex-direction: column; margin-left: 25px; } -.text { - grid-area: description; +.text_big { + grid-area: description; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + display: flex; + justify-content: center; + flex-direction: column; + margin-left: 25px; } -.senzory { - grid-area: senzory; +.sensors_small { + width: 140px; + grid-area: senzory; + display: flex; + justify-content: center; + flex-direction: column; } -.info { +.sensors_big { + grid-area: senzory; + display: flex; + justify-content: center; + flex-direction: column; +} +.info_small { + grid-area: info; +} +.info_big { grid-area: info; } .listHide { display: none; - background: #ffffff; } .expand { display: grid; @@ -227,6 +275,7 @@ body { border-radius: 10px; height: 600px; width: 550px; + background-color: white; } .big { display: grid; @@ -238,6 +287,7 @@ body { "description info"; position: absolute; border-radius: 10px; + margin-top: -12px; left: 650px; top: 117px; height: 700px; @@ -248,8 +298,48 @@ body { .appear { display: flex; } +.imgBig { + margin-left: 25px; + margin-top: 25px; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.wsImg { + width: 500px; + height: 350px; +} /* ---------- Responzívnosť (media tag) ---------- */ -@media (max-width: 1000px) { +@media (min-width: 1350px) { + .arrow { + display: none; + } + .wsList { + width: 481px; + } +} +@media (max-width: 1550px) { + .obrazok_big { + width: 400px; + height: 250px; + } + .big { + width: 800px; + height: 600px; + } +} +@media (max-width: 1450px) { + .obrazok_big { + width: 350px; + height: 200px; + } + .big { + width: 700px; + height: 500px; + } +} +@media (max-width: 1350px) { .big { display: none; } @@ -262,7 +352,6 @@ body { visibility: visible; } .burgerList { - display: none; flex-direction: column; align-items: center; margin-right: 30px; @@ -275,4 +364,53 @@ body { .bItem { margin-top: 10px; } + +} +@media (max-width: 570px) { + .wsList { + background: white; + width: 500px; + height: 100px; + border-radius: 10px; + margin-left: 0px; + margin-top: 5px; + } + .wsImg { + width: 120px; + border-radius: 10px; + margin-right: auto; + } + .title0 { + font-size: 15px; + } + .short_description { + font-size: 15px; + } + .list_item_holder { + margin-right: 20px; + } + #arrow0 { + margin-top: 30px; + font-size: 40px; + width: 40px; + height: 40px; + } + .expand { + margin-left: 0px; + width: 500px; + height: 550px; + } +} +@media (max-width: 360px) and (max-height: 640px) { + .wsList { + background: white; + width: 360px; + height: 100px; + border-radius: 10px; + margin-left: 0px; + margin-top: 5px; + } + .list_item_holder { + margin-right: -10px; + } } \ No newline at end of file diff --git a/websites/appjs.js b/website/appjs.js similarity index 96% rename from websites/appjs.js rename to website/appjs.js index 45f618e..d08b203 100644 --- a/websites/appjs.js +++ b/website/appjs.js @@ -1,5 +1,5 @@ function onclick1() { - var click = document.getElementById("arrow1"); + var click = document.getElementById("arrow0"); click.classList.toggle("mystyle"); var expand = document.getElementById("listExpand1"); expand.classList.toggle("expand"); diff --git a/website/article1img.jpg b/website/article1img.jpg new file mode 100644 index 0000000..09d4128 Binary files /dev/null and b/website/article1img.jpg differ diff --git a/website/click1.js b/website/click1.js new file mode 100644 index 0000000..1cd1023 --- /dev/null +++ b/website/click1.js @@ -0,0 +1,22 @@ +// fetch("http://192.168.1.105:8000/0/sensors") +// .then(function(response1){ +// return response1.json(); +// }) +// .then(function(data1){ +// appendData(data1); +// }) +// .catch(function(err1){ +// console.log(err1); + +// }); +// function appendData(data1){ +// console.log(data1); +// var senzory = JSON.stringify(data1[1]["teplota"]); +// var mainContainer3 = document.getElementById("fuckthisshit"); +// var div3 = document.createElement("div"); +// div3.setAttribute("id", "endme"); +// div3.innerHTML = data3[1].teplota + +// mainContainer3.appendChild(div3); + +// } diff --git a/website/click1a.js b/website/click1a.js new file mode 100644 index 0000000..c4c7096 --- /dev/null +++ b/website/click1a.js @@ -0,0 +1,5 @@ +var lmao = document.getElementById("fuckme") +function klol(){ + if (lmao) lmao.className = " "; + lmao.style.color = "yellow"; +} \ No newline at end of file diff --git a/website/colt.css b/website/colt.css new file mode 100644 index 0000000..c036c5e --- /dev/null +++ b/website/colt.css @@ -0,0 +1,11 @@ +.circle{ + width: 300px; + height: 300px; + background-color: magenta; + transition: background-color 1s 1s; +} +.circle:hover{ + background-color: cyan; + border-radius: 50%; + +} \ No newline at end of file diff --git a/website/colt.js b/website/colt.js new file mode 100644 index 0000000..e69de29 diff --git a/website/desc_short.js b/website/desc_short.js new file mode 100644 index 0000000..0b03ab9 --- /dev/null +++ b/website/desc_short.js @@ -0,0 +1,112 @@ + +$(document).ready(function() { + let base_url = "http://192.168.1.105:8000/"; + let ids_list = []; + + $.get("ip.txt", function(data) { + console.log(data); + base_url = `http://${data}:8000/`; + init_wesite(); + }); + + function append_element(image_urls, descriptions, title, id) { + ids_list.push(id); + + let template = ` +
+
+ # +
+
${title}
+
${descriptions[0]}
+
+
▼
+
+ +
+ # +
${descriptions[1]}
+
+
+
+
+ +
+
#
+
${descriptions[1]}
+
+
+
+
`; + + $("body").append(template); + + $.get(`${base_url}${id}/sensors`, function(data1) { + Object.keys(data1).forEach(function(key) { + let value = data1[key]; + if (key.startsWith("[translate]-")) { + key = key.slice(12, key.length); + } + $(".sensors_small").append(`

${key}: ${value}

`); + $(".sensors_big").append(`

${key}: ${value}

`); + }); + }); + + $(".arrow").click(function() { + + let id = this.id; + id = id.slice(id.length-1, id.length); + + $(`#arrow${id}`).toggleClass("mystyle"); + $(`#listExpand${id}`).toggleClass("expand"); + id.a(); + }); + + $(".list_item_holder").click(function() { + let id = this.id; + id = id.slice(id.length-1, id.length); + + clear_big_display(); + $(`#big${id}`).show(); + }); + + } + + function clear_big_display(){ + ids_list.forEach(function(id) { + $(`#big${id}`).hide(); + }); + } + + function init_wesite() { + $.get(`${base_url}devices_list`, function(data) { + + let connected_id = data[0]["connected_id"]; + let urls = ["", ""]; + let descriptions = ["", ""]; + let title = ""; + let query = [[]]; + + for (let i = 1; i < data.length; i++) { + let spot_data = data[i]; + let spot_id = spot_data["ID"] + urls = [`${base_url}files/${spot_id}/${spot_data["description"]["photo_s"]}`, + `${base_url}files/${spot_id}/${spot_data["description"]["photo_b"]}`]; + descriptions = [spot_data["description"]["description_s"], + spot_data["description"]["description_l"]]; + title = spot_data["description"]["title"]; + + if (spot_id == connected_id) { + query[0] = [urls, descriptions, title, parseInt(spot_id)]; + } else { + query.push([urls, descriptions, title, parseInt(spot_id)]); + } + } + + for (let i = 0; i < query.length; i++) { + append_element(query[i][0], query[i][1], query[i][2], query[i][3]); + } + + }) + } +}) \ No newline at end of file diff --git a/website/features-iphone-2.png b/website/features-iphone-2.png new file mode 100644 index 0000000..72a4ca0 Binary files /dev/null and b/website/features-iphone-2.png differ diff --git a/website/filesystem.json b/website/filesystem.json new file mode 100644 index 0000000..c64f093 --- /dev/null +++ b/website/filesystem.json @@ -0,0 +1,22 @@ +{ + "ID": "0", + "location": "izba", + "description": { + "title": "legionrpi", + "description_s": "krátky popis, ktorý bude zobrazený iba v náhladovom okne", + "description_l": "dlhší popis zariadenia, ktorý bude zobrazený po otvorení", + "photo_s": "mala_fotka.png", + "photo_b": "velka fotka.png" + }, + "files": [ + { + "name": "test", + "format": ".jpg", + "description": "toto je jpg test file" + }, { + "name": "test2", + "format": ".txt", + "description": "toto je txt test file" + } + ] +} diff --git a/website/fuckme.json b/website/fuckme.json new file mode 100644 index 0000000..628de85 --- /dev/null +++ b/website/fuckme.json @@ -0,0 +1,7 @@ +[ + { + "id": "1", + "location": "izba", + "desc": "hey" + } +] \ No newline at end of file diff --git a/websites/header-background.jpg b/website/header-background.jpg similarity index 100% rename from websites/header-background.jpg rename to website/header-background.jpg diff --git a/website/hover.css b/website/hover.css new file mode 100644 index 0000000..f5fcf87 --- /dev/null +++ b/website/hover.css @@ -0,0 +1,4152 @@ +/*! + * Hover.css (http://ianlunn.github.io/Hover/) + * Version: 2.3.2 + * Author: Ian Lunn @IanLunn + * Author URL: http://ianlunn.co.uk/ + * Github: https://github.com/IanLunn/Hover + + * Hover.css Copyright Ian Lunn 2017. Generated with Sass. + */ +/* 2D TRANSITIONS */ +/* Grow */ +.hvr-grow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} + +/* Shrink */ +.hvr-shrink { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active { + -webkit-transform: scale(0.9); + transform: scale(0.9); +} + +/* Pulse */ +@-webkit-keyframes hvr-pulse { + 25% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + 75% { + -webkit-transform: scale(0.9); + transform: scale(0.9); + } +} +@keyframes hvr-pulse { + 25% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + 75% { + -webkit-transform: scale(0.9); + transform: scale(0.9); + } +} +.hvr-pulse { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active { + -webkit-animation-name: hvr-pulse; + animation-name: hvr-pulse; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +/* Pulse Grow */ +@-webkit-keyframes hvr-pulse-grow { + to { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } +} +@keyframes hvr-pulse-grow { + to { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } +} +.hvr-pulse-grow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active { + -webkit-animation-name: hvr-pulse-grow; + animation-name: hvr-pulse-grow; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +/* Pulse Shrink */ +@-webkit-keyframes hvr-pulse-shrink { + to { + -webkit-transform: scale(0.9); + transform: scale(0.9); + } +} +@keyframes hvr-pulse-shrink { + to { + -webkit-transform: scale(0.9); + transform: scale(0.9); + } +} +.hvr-pulse-shrink { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-pulse-shrink:hover, .hvr-pulse-shrink:focus, .hvr-pulse-shrink:active { + -webkit-animation-name: hvr-pulse-shrink; + animation-name: hvr-pulse-shrink; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +/* Push */ +@-webkit-keyframes hvr-push { + 50% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes hvr-push { + 50% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} +.hvr-push { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-push:hover, .hvr-push:focus, .hvr-push:active { + -webkit-animation-name: hvr-push; + animation-name: hvr-push; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Pop */ +@-webkit-keyframes hvr-pop { + 50% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } +} +@keyframes hvr-pop { + 50% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } +} +.hvr-pop { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active { + -webkit-animation-name: hvr-pop; + animation-name: hvr-pop; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Bounce In */ +.hvr-bounce-in { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; +} +.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active { + -webkit-transform: scale(1.2); + transform: scale(1.2); + -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); + transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); +} + +/* Bounce Out */ +.hvr-bounce-out { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; +} +.hvr-bounce-out:hover, .hvr-bounce-out:focus, .hvr-bounce-out:active { + -webkit-transform: scale(0.8); + transform: scale(0.8); + -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); + transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); +} + +/* Rotate */ +.hvr-rotate { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active { + -webkit-transform: rotate(4deg); + transform: rotate(4deg); +} + +/* Grow Rotate */ +.hvr-grow-rotate { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active { + -webkit-transform: scale(1.1) rotate(4deg); + transform: scale(1.1) rotate(4deg); +} + +/* Float */ +.hvr-float { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-float:hover, .hvr-float:focus, .hvr-float:active { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); +} + +/* Sink */ +.hvr-sink { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active { + -webkit-transform: translateY(8px); + transform: translateY(8px); +} + +/* Bob */ +@-webkit-keyframes hvr-bob { + 0% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); + } + 50% { + -webkit-transform: translateY(-4px); + transform: translateY(-4px); + } + 100% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); + } +} +@keyframes hvr-bob { + 0% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); + } + 50% { + -webkit-transform: translateY(-4px); + transform: translateY(-4px); + } + 100% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); + } +} +@-webkit-keyframes hvr-bob-float { + 100% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); + } +} +@keyframes hvr-bob-float { + 100% { + -webkit-transform: translateY(-8px); + transform: translateY(-8px); + } +} +.hvr-bob { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active { + -webkit-animation-name: hvr-bob-float, hvr-bob; + animation-name: hvr-bob-float, hvr-bob; + -webkit-animation-duration: .3s, 1.5s; + animation-duration: .3s, 1.5s; + -webkit-animation-delay: 0s, .3s; + animation-delay: 0s, .3s; + -webkit-animation-timing-function: ease-out, ease-in-out; + animation-timing-function: ease-out, ease-in-out; + -webkit-animation-iteration-count: 1, infinite; + animation-iteration-count: 1, infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-direction: normal, alternate; + animation-direction: normal, alternate; +} + +/* Hang */ +@-webkit-keyframes hvr-hang { + 0% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } + 50% { + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + 100% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } +} +@keyframes hvr-hang { + 0% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } + 50% { + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + 100% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } +} +@-webkit-keyframes hvr-hang-sink { + 100% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } +} +@keyframes hvr-hang-sink { + 100% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } +} +.hvr-hang { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-hang:hover, .hvr-hang:focus, .hvr-hang:active { + -webkit-animation-name: hvr-hang-sink, hvr-hang; + animation-name: hvr-hang-sink, hvr-hang; + -webkit-animation-duration: .3s, 1.5s; + animation-duration: .3s, 1.5s; + -webkit-animation-delay: 0s, .3s; + animation-delay: 0s, .3s; + -webkit-animation-timing-function: ease-out, ease-in-out; + animation-timing-function: ease-out, ease-in-out; + -webkit-animation-iteration-count: 1, infinite; + animation-iteration-count: 1, infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-direction: normal, alternate; + animation-direction: normal, alternate; +} + +/* Skew */ +.hvr-skew { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-skew:hover, .hvr-skew:focus, .hvr-skew:active { + -webkit-transform: skew(-10deg); + transform: skew(-10deg); +} + +/* Skew Forward */ +.hvr-skew-forward { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; +} +.hvr-skew-forward:hover, .hvr-skew-forward:focus, .hvr-skew-forward:active { + -webkit-transform: skew(-10deg); + transform: skew(-10deg); +} + +/* Skew Backward */ +.hvr-skew-backward { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; +} +.hvr-skew-backward:hover, .hvr-skew-backward:focus, .hvr-skew-backward:active { + -webkit-transform: skew(10deg); + transform: skew(10deg); +} + +/* Wobble Vertical */ +@-webkit-keyframes hvr-wobble-vertical { + 16.65% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } + 33.3% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + 49.95% { + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + 66.6% { + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } + 83.25% { + -webkit-transform: translateY(1px); + transform: translateY(1px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes hvr-wobble-vertical { + 16.65% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } + 33.3% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + 49.95% { + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + 66.6% { + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } + 83.25% { + -webkit-transform: translateY(1px); + transform: translateY(1px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +.hvr-wobble-vertical { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active { + -webkit-animation-name: hvr-wobble-vertical; + animation-name: hvr-wobble-vertical; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Wobble Horizontal */ +@-webkit-keyframes hvr-wobble-horizontal { + 16.65% { + -webkit-transform: translateX(8px); + transform: translateX(8px); + } + 33.3% { + -webkit-transform: translateX(-6px); + transform: translateX(-6px); + } + 49.95% { + -webkit-transform: translateX(4px); + transform: translateX(4px); + } + 66.6% { + -webkit-transform: translateX(-2px); + transform: translateX(-2px); + } + 83.25% { + -webkit-transform: translateX(1px); + transform: translateX(1px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes hvr-wobble-horizontal { + 16.65% { + -webkit-transform: translateX(8px); + transform: translateX(8px); + } + 33.3% { + -webkit-transform: translateX(-6px); + transform: translateX(-6px); + } + 49.95% { + -webkit-transform: translateX(4px); + transform: translateX(4px); + } + 66.6% { + -webkit-transform: translateX(-2px); + transform: translateX(-2px); + } + 83.25% { + -webkit-transform: translateX(1px); + transform: translateX(1px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +.hvr-wobble-horizontal { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active { + -webkit-animation-name: hvr-wobble-horizontal; + animation-name: hvr-wobble-horizontal; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Wobble To Bottom Right */ +@-webkit-keyframes hvr-wobble-to-bottom-right { + 16.65% { + -webkit-transform: translate(8px, 8px); + transform: translate(8px, 8px); + } + 33.3% { + -webkit-transform: translate(-6px, -6px); + transform: translate(-6px, -6px); + } + 49.95% { + -webkit-transform: translate(4px, 4px); + transform: translate(4px, 4px); + } + 66.6% { + -webkit-transform: translate(-2px, -2px); + transform: translate(-2px, -2px); + } + 83.25% { + -webkit-transform: translate(1px, 1px); + transform: translate(1px, 1px); + } + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } +} +@keyframes hvr-wobble-to-bottom-right { + 16.65% { + -webkit-transform: translate(8px, 8px); + transform: translate(8px, 8px); + } + 33.3% { + -webkit-transform: translate(-6px, -6px); + transform: translate(-6px, -6px); + } + 49.95% { + -webkit-transform: translate(4px, 4px); + transform: translate(4px, 4px); + } + 66.6% { + -webkit-transform: translate(-2px, -2px); + transform: translate(-2px, -2px); + } + 83.25% { + -webkit-transform: translate(1px, 1px); + transform: translate(1px, 1px); + } + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } +} +.hvr-wobble-to-bottom-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-wobble-to-bottom-right:hover, .hvr-wobble-to-bottom-right:focus, .hvr-wobble-to-bottom-right:active { + -webkit-animation-name: hvr-wobble-to-bottom-right; + animation-name: hvr-wobble-to-bottom-right; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Wobble To Top Right */ +@-webkit-keyframes hvr-wobble-to-top-right { + 16.65% { + -webkit-transform: translate(8px, -8px); + transform: translate(8px, -8px); + } + 33.3% { + -webkit-transform: translate(-6px, 6px); + transform: translate(-6px, 6px); + } + 49.95% { + -webkit-transform: translate(4px, -4px); + transform: translate(4px, -4px); + } + 66.6% { + -webkit-transform: translate(-2px, 2px); + transform: translate(-2px, 2px); + } + 83.25% { + -webkit-transform: translate(1px, -1px); + transform: translate(1px, -1px); + } + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } +} +@keyframes hvr-wobble-to-top-right { + 16.65% { + -webkit-transform: translate(8px, -8px); + transform: translate(8px, -8px); + } + 33.3% { + -webkit-transform: translate(-6px, 6px); + transform: translate(-6px, 6px); + } + 49.95% { + -webkit-transform: translate(4px, -4px); + transform: translate(4px, -4px); + } + 66.6% { + -webkit-transform: translate(-2px, 2px); + transform: translate(-2px, 2px); + } + 83.25% { + -webkit-transform: translate(1px, -1px); + transform: translate(1px, -1px); + } + 100% { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); + } +} +.hvr-wobble-to-top-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-wobble-to-top-right:hover, .hvr-wobble-to-top-right:focus, .hvr-wobble-to-top-right:active { + -webkit-animation-name: hvr-wobble-to-top-right; + animation-name: hvr-wobble-to-top-right; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Wobble Top */ +@-webkit-keyframes hvr-wobble-top { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } +} +@keyframes hvr-wobble-top { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } +} +.hvr-wobble-top { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; +} +.hvr-wobble-top:hover, .hvr-wobble-top:focus, .hvr-wobble-top:active { + -webkit-animation-name: hvr-wobble-top; + animation-name: hvr-wobble-top; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Wobble Bottom */ +@-webkit-keyframes hvr-wobble-bottom { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } +} +@keyframes hvr-wobble-bottom { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } +} +.hvr-wobble-bottom { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transform-origin: 100% 0; + transform-origin: 100% 0; +} +.hvr-wobble-bottom:hover, .hvr-wobble-bottom:focus, .hvr-wobble-bottom:active { + -webkit-animation-name: hvr-wobble-bottom; + animation-name: hvr-wobble-bottom; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Wobble Skew */ +@-webkit-keyframes hvr-wobble-skew { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } +} +@keyframes hvr-wobble-skew { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } +} +.hvr-wobble-skew { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-wobble-skew:hover, .hvr-wobble-skew:focus, .hvr-wobble-skew:active { + -webkit-animation-name: hvr-wobble-skew; + animation-name: hvr-wobble-skew; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Buzz */ +@-webkit-keyframes hvr-buzz { + 50% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 100% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } +} +@keyframes hvr-buzz { + 50% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 100% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } +} +.hvr-buzz { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active { + -webkit-animation-name: hvr-buzz; + animation-name: hvr-buzz; + -webkit-animation-duration: 0.15s; + animation-duration: 0.15s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +/* Buzz Out */ +@-webkit-keyframes hvr-buzz-out { + 10% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 20% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 30% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 40% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 50% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 60% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 70% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 80% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 90% { + -webkit-transform: translateX(1px) rotate(0); + transform: translateX(1px) rotate(0); + } + 100% { + -webkit-transform: translateX(-1px) rotate(0); + transform: translateX(-1px) rotate(0); + } +} +@keyframes hvr-buzz-out { + 10% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 20% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 30% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 40% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 50% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 60% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 70% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 80% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 90% { + -webkit-transform: translateX(1px) rotate(0); + transform: translateX(1px) rotate(0); + } + 100% { + -webkit-transform: translateX(-1px) rotate(0); + transform: translateX(-1px) rotate(0); + } +} +.hvr-buzz-out { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active { + -webkit-animation-name: hvr-buzz-out; + animation-name: hvr-buzz-out; + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Forward */ +.hvr-forward { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active { + -webkit-transform: translateX(8px); + transform: translateX(8px); +} + +/* Backward */ +.hvr-backward { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-backward:hover, .hvr-backward:focus, .hvr-backward:active { + -webkit-transform: translateX(-8px); + transform: translateX(-8px); +} + +/* BACKGROUND TRANSITIONS */ +/* Fade */ +.hvr-fade { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + overflow: hidden; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: color, background-color; + transition-property: color, background-color; +} +.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active { + background-color: #2098D1; + color: white; +} + +/* Back Pulse */ +@-webkit-keyframes hvr-back-pulse { + 50% { + background-color: rgba(32, 152, 209, 0.75); + } +} +@keyframes hvr-back-pulse { + 50% { + background-color: rgba(32, 152, 209, 0.75); + } +} +.hvr-back-pulse { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + overflow: hidden; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-property: color, background-color; + transition-property: color, background-color; +} +.hvr-back-pulse:hover, .hvr-back-pulse:focus, .hvr-back-pulse:active { + -webkit-animation-name: hvr-back-pulse; + animation-name: hvr-back-pulse; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + background-color: #2098D1; + background-color: #2098d1; + color: white; +} + +/* Sweep To Right */ +.hvr-sweep-to-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-sweep-to-right:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 0 50%; + transform-origin: 0 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { + color: white; +} +.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { + -webkit-transform: scaleX(1); + transform: scaleX(1); +} + +/* Sweep To Left */ +.hvr-sweep-to-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-sweep-to-left:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 100% 50%; + transform-origin: 100% 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active { + color: white; +} +.hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before { + -webkit-transform: scaleX(1); + transform: scaleX(1); +} + +/* Sweep To Bottom */ +.hvr-sweep-to-bottom { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-sweep-to-bottom:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: 50% 0; + transform-origin: 50% 0; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active { + color: white; +} +.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before { + -webkit-transform: scaleY(1); + transform: scaleY(1); +} + +/* Sweep To Top */ +.hvr-sweep-to-top { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-sweep-to-top:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active { + color: white; +} +.hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before { + -webkit-transform: scaleY(1); + transform: scaleY(1); +} + +/* Bounce To Right */ +.hvr-bounce-to-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; +} +.hvr-bounce-to-right:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 0 50%; + transform-origin: 0 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active { + color: white; +} +.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before { + -webkit-transform: scaleX(1); + transform: scaleX(1); + -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); +} + +/* Bounce To Left */ +.hvr-bounce-to-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; +} +.hvr-bounce-to-left:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 100% 50%; + transform-origin: 100% 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-bounce-to-left:hover, .hvr-bounce-to-left:focus, .hvr-bounce-to-left:active { + color: white; +} +.hvr-bounce-to-left:hover:before, .hvr-bounce-to-left:focus:before, .hvr-bounce-to-left:active:before { + -webkit-transform: scaleX(1); + transform: scaleX(1); + -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); +} + +/* Bounce To Bottom */ +.hvr-bounce-to-bottom { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; +} +.hvr-bounce-to-bottom:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: 50% 0; + transform-origin: 50% 0; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-bounce-to-bottom:hover, .hvr-bounce-to-bottom:focus, .hvr-bounce-to-bottom:active { + color: white; +} +.hvr-bounce-to-bottom:hover:before, .hvr-bounce-to-bottom:focus:before, .hvr-bounce-to-bottom:active:before { + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); +} + +/* Bounce To Top */ +.hvr-bounce-to-top { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; +} +.hvr-bounce-to-top:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-bounce-to-top:hover, .hvr-bounce-to-top:focus, .hvr-bounce-to-top:active { + color: white; +} +.hvr-bounce-to-top:hover:before, .hvr-bounce-to-top:focus:before, .hvr-bounce-to-top:active:before { + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); +} + +/* Radial Out */ +.hvr-radial-out { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + background: #e1e1e1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-radial-out:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + border-radius: 100%; + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active { + color: white; +} +.hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before { + -webkit-transform: scale(2); + transform: scale(2); +} + +/* Radial In */ +.hvr-radial-in { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + background: #2098D1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-radial-in:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #e1e1e1; + border-radius: 100%; + -webkit-transform: scale(2); + transform: scale(2); + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-radial-in:hover, .hvr-radial-in:focus, .hvr-radial-in:active { + color: white; +} +.hvr-radial-in:hover:before, .hvr-radial-in:focus:before, .hvr-radial-in:active:before { + -webkit-transform: scale(0); + transform: scale(0); +} + +/* Rectangle In */ +.hvr-rectangle-in { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + background: #2098D1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-rectangle-in:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #e1e1e1; + -webkit-transform: scale(1); + transform: scale(1); + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-rectangle-in:hover, .hvr-rectangle-in:focus, .hvr-rectangle-in:active { + color: white; +} +.hvr-rectangle-in:hover:before, .hvr-rectangle-in:focus:before, .hvr-rectangle-in:active:before { + -webkit-transform: scale(0); + transform: scale(0); +} + +/* Rectangle Out */ +.hvr-rectangle-out { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + background: #e1e1e1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-rectangle-out:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-rectangle-out:hover, .hvr-rectangle-out:focus, .hvr-rectangle-out:active { + color: white; +} +.hvr-rectangle-out:hover:before, .hvr-rectangle-out:focus:before, .hvr-rectangle-out:active:before { + -webkit-transform: scale(1); + transform: scale(1); +} + +/* Shutter In Horizontal */ +.hvr-shutter-in-horizontal { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + background: #2098D1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-shutter-in-horizontal:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: #e1e1e1; + -webkit-transform: scaleX(1); + transform: scaleX(1); + -webkit-transform-origin: 50%; + transform-origin: 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active { + color: white; +} +.hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before { + -webkit-transform: scaleX(0); + transform: scaleX(0); +} + +/* Shutter Out Horizontal */ +.hvr-shutter-out-horizontal { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + background: #e1e1e1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-shutter-out-horizontal:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: #2098D1; + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 50%; + transform-origin: 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active { + color: white; +} +.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before { + -webkit-transform: scaleX(1); + transform: scaleX(1); +} + +/* Shutter In Vertical */ +.hvr-shutter-in-vertical { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + background: #2098D1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-shutter-in-vertical:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: #e1e1e1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: 50%; + transform-origin: 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-shutter-in-vertical:hover, .hvr-shutter-in-vertical:focus, .hvr-shutter-in-vertical:active { + color: white; +} +.hvr-shutter-in-vertical:hover:before, .hvr-shutter-in-vertical:focus:before, .hvr-shutter-in-vertical:active:before { + -webkit-transform: scaleY(0); + transform: scaleY(0); +} + +/* Shutter Out Vertical */ +.hvr-shutter-out-vertical { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + background: #e1e1e1; + -webkit-transition-property: color; + transition-property: color; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-shutter-out-vertical:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: #2098D1; + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: 50%; + transform-origin: 50%; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-shutter-out-vertical:hover, .hvr-shutter-out-vertical:focus, .hvr-shutter-out-vertical:active { + color: white; +} +.hvr-shutter-out-vertical:hover:before, .hvr-shutter-out-vertical:focus:before, .hvr-shutter-out-vertical:active:before { + -webkit-transform: scaleY(1); + transform: scaleY(1); +} + +/* BORDER TRANSITIONS */ +/* Border Fade */ +.hvr-border-fade { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} +.hvr-border-fade:hover, .hvr-border-fade:focus, .hvr-border-fade:active { + box-shadow: inset 0 0 0 4px #2098D1, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} + +/* Hollow */ +.hvr-hollow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: background; + transition-property: background; + box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} +.hvr-hollow:hover, .hvr-hollow:focus, .hvr-hollow:active { + background: none; +} + +/* Trim */ +.hvr-trim { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; +} +.hvr-trim:before { + content: ''; + position: absolute; + border: white solid 4px; + top: 4px; + left: 4px; + right: 4px; + bottom: 4px; + opacity: 0; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: opacity; + transition-property: opacity; +} +.hvr-trim:hover:before, .hvr-trim:focus:before, .hvr-trim:active:before { + opacity: 1; +} + +/* Ripple Out */ +@-webkit-keyframes hvr-ripple-out { + 100% { + top: -12px; + right: -12px; + bottom: -12px; + left: -12px; + opacity: 0; + } +} +@keyframes hvr-ripple-out { + 100% { + top: -12px; + right: -12px; + bottom: -12px; + left: -12px; + opacity: 0; + } +} +.hvr-ripple-out { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; +} +.hvr-ripple-out:before { + content: ''; + position: absolute; + border: #e1e1e1 solid 6px; + top: 0; + right: 0; + bottom: 0; + left: 0; + -webkit-animation-duration: 1s; + animation-duration: 1s; +} +.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before { + -webkit-animation-name: hvr-ripple-out; + animation-name: hvr-ripple-out; +} + +/* Ripple In */ +@-webkit-keyframes hvr-ripple-in { + 100% { + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 1; + } +} +@keyframes hvr-ripple-in { + 100% { + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 1; + } +} +.hvr-ripple-in { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; +} +.hvr-ripple-in:before { + content: ''; + position: absolute; + border: #e1e1e1 solid 4px; + top: -12px; + right: -12px; + bottom: -12px; + left: -12px; + opacity: 0; + -webkit-animation-duration: 1s; + animation-duration: 1s; +} +.hvr-ripple-in:hover:before, .hvr-ripple-in:focus:before, .hvr-ripple-in:active:before { + -webkit-animation-name: hvr-ripple-in; + animation-name: hvr-ripple-in; +} + +/* Outline Out */ +.hvr-outline-out { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; +} +.hvr-outline-out:before { + content: ''; + position: absolute; + border: #e1e1e1 solid 4px; + top: 0; + right: 0; + bottom: 0; + left: 0; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: top, right, bottom, left; + transition-property: top, right, bottom, left; +} +.hvr-outline-out:hover:before, .hvr-outline-out:focus:before, .hvr-outline-out:active:before { + top: -8px; + right: -8px; + bottom: -8px; + left: -8px; +} + +/* Outline In */ +.hvr-outline-in { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; +} +.hvr-outline-in:before { + pointer-events: none; + content: ''; + position: absolute; + border: #e1e1e1 solid 4px; + top: -16px; + right: -16px; + bottom: -16px; + left: -16px; + opacity: 0; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: top, right, bottom, left; + transition-property: top, right, bottom, left; +} +.hvr-outline-in:hover:before, .hvr-outline-in:focus:before, .hvr-outline-in:active:before { + top: -8px; + right: -8px; + bottom: -8px; + left: -8px; + opacity: 1; +} + +/* Round Corners */ +.hvr-round-corners { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: border-radius; + transition-property: border-radius; +} +.hvr-round-corners:hover, .hvr-round-corners:focus, .hvr-round-corners:active { + border-radius: 1em; +} + +/* Underline From Left */ +.hvr-underline-from-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; +} +.hvr-underline-from-left:before { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 100%; + bottom: 0; + background: #2098D1; + height: 4px; + -webkit-transition-property: right; + transition-property: right; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before { + right: 0; +} + +/* Underline From Center */ +.hvr-underline-from-center { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; +} +.hvr-underline-from-center:before { + content: ""; + position: absolute; + z-index: -1; + left: 51%; + right: 51%; + bottom: 0; + background: #2098D1; + height: 4px; + -webkit-transition-property: left, right; + transition-property: left, right; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before { + left: 0; + right: 0; +} + +/* Underline From Right */ +.hvr-underline-from-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; +} +.hvr-underline-from-right:before { + content: ""; + position: absolute; + z-index: -1; + left: 100%; + right: 0; + bottom: 0; + background: #2098D1; + height: 4px; + -webkit-transition-property: left; + transition-property: left; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-underline-from-right:hover:before, .hvr-underline-from-right:focus:before, .hvr-underline-from-right:active:before { + left: 0; +} + +/* Overline From Left */ +.hvr-overline-from-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; +} +.hvr-overline-from-left:before { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 100%; + top: 0; + background: #2098D1; + height: 4px; + -webkit-transition-property: right; + transition-property: right; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-overline-from-left:hover:before, .hvr-overline-from-left:focus:before, .hvr-overline-from-left:active:before { + right: 0; +} + +/* Overline From Center */ +.hvr-overline-from-center { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; +} +.hvr-overline-from-center:before { + content: ""; + position: absolute; + z-index: -1; + left: 51%; + right: 51%; + top: 0; + background: #2098D1; + height: 4px; + -webkit-transition-property: left, right; + transition-property: left, right; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before { + left: 0; + right: 0; +} + +/* Overline From Right */ +.hvr-overline-from-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; +} +.hvr-overline-from-right:before { + content: ""; + position: absolute; + z-index: -1; + left: 100%; + right: 0; + top: 0; + background: #2098D1; + height: 4px; + -webkit-transition-property: left; + transition-property: left; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-overline-from-right:hover:before, .hvr-overline-from-right:focus:before, .hvr-overline-from-right:active:before { + left: 0; +} + +/* Reveal */ +.hvr-reveal { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; +} +.hvr-reveal:before { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 0; + top: 0; + bottom: 0; + border-color: #2098D1; + border-style: solid; + border-width: 0; + -webkit-transition-property: border-width; + transition-property: border-width; + -webkit-transition-duration: 0.1s; + transition-duration: 0.1s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before { + -webkit-transform: translateY(0); + transform: translateY(0); + border-width: 4px; +} + +/* Underline Reveal */ +.hvr-underline-reveal { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; +} +.hvr-underline-reveal:before { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 0; + bottom: 0; + background: #2098D1; + height: 4px; + -webkit-transform: translateY(4px); + transform: translateY(4px); + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-underline-reveal:hover:before, .hvr-underline-reveal:focus:before, .hvr-underline-reveal:active:before { + -webkit-transform: translateY(0); + transform: translateY(0); +} + +/* Overline Reveal */ +.hvr-overline-reveal { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; +} +.hvr-overline-reveal:before { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 0; + top: 0; + background: #2098D1; + height: 4px; + -webkit-transform: translateY(-4px); + transform: translateY(-4px); + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-overline-reveal:hover:before, .hvr-overline-reveal:focus:before, .hvr-overline-reveal:active:before { + -webkit-transform: translateY(0); + transform: translateY(0); +} + +/* SHADOW/GLOW TRANSITIONS */ +/* Glow */ +.hvr-glow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; +} +.hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active { + box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); +} + +/* Shadow */ +.hvr-shadow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; +} +.hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active { + box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); +} + +/* Grow Shadow */ +.hvr-grow-shadow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow, transform; + transition-property: box-shadow, transform; +} +.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active { + box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); + -webkit-transform: scale(1.1); + transform: scale(1.1); +} + +/* Box Shadow Outset */ +.hvr-box-shadow-outset { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; +} +.hvr-box-shadow-outset:hover, .hvr-box-shadow-outset:focus, .hvr-box-shadow-outset:active { + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); +} + +/* Box Shadow Inset */ +.hvr-box-shadow-inset { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} +.hvr-box-shadow-inset:hover, .hvr-box-shadow-inset:focus, .hvr-box-shadow-inset:active { + box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} + +/* Float Shadow */ +.hvr-float-shadow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-float-shadow:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: 100%; + left: 5%; + height: 10px; + width: 90%; + opacity: 0; + background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); + background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); + /* W3C */ + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform, opacity; + transition-property: transform, opacity; +} +.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active { + -webkit-transform: translateY(-5px); + transform: translateY(-5px); + /* move the element up by 5px */ +} +.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before { + opacity: 1; + -webkit-transform: translateY(5px); + transform: translateY(5px); + /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ +} + +/* Shadow Radial */ +.hvr-shadow-radial { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; +} +.hvr-shadow-radial:before, .hvr-shadow-radial:after { + pointer-events: none; + position: absolute; + content: ''; + left: 0; + width: 100%; + box-sizing: border-box; + background-repeat: no-repeat; + height: 5px; + opacity: 0; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: opacity; + transition-property: opacity; +} +.hvr-shadow-radial:before { + bottom: 100%; + background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); + background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); +} +.hvr-shadow-radial:after { + top: 100%; + background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); + background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); +} +.hvr-shadow-radial:hover:before, .hvr-shadow-radial:focus:before, .hvr-shadow-radial:active:before, .hvr-shadow-radial:hover:after, .hvr-shadow-radial:focus:after, .hvr-shadow-radial:active:after { + opacity: 1; +} + +/* SPEECH BUBBLES */ +/* Bubble Top */ +.hvr-bubble-top { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; +} +.hvr-bubble-top:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + left: calc(50% - 10px); + top: 0; + border-width: 0 10px 10px 10px; + border-color: transparent transparent #e1e1e1 transparent; +} +.hvr-bubble-top:hover:before, .hvr-bubble-top:focus:before, .hvr-bubble-top:active:before { + -webkit-transform: translateY(-10px); + transform: translateY(-10px); +} + +/* Bubble Right */ +.hvr-bubble-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; +} +.hvr-bubble-right:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + top: calc(50% - 10px); + right: 0; + border-width: 10px 0 10px 10px; + border-color: transparent transparent transparent #e1e1e1; +} +.hvr-bubble-right:hover:before, .hvr-bubble-right:focus:before, .hvr-bubble-right:active:before { + -webkit-transform: translateX(10px); + transform: translateX(10px); +} + +/* Bubble Bottom */ +.hvr-bubble-bottom { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; +} +.hvr-bubble-bottom:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + left: calc(50% - 10px); + bottom: 0; + border-width: 10px 10px 0 10px; + border-color: #e1e1e1 transparent transparent transparent; +} +.hvr-bubble-bottom:hover:before, .hvr-bubble-bottom:focus:before, .hvr-bubble-bottom:active:before { + -webkit-transform: translateY(10px); + transform: translateY(10px); +} + +/* Bubble Left */ +.hvr-bubble-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; +} +.hvr-bubble-left:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + top: calc(50% - 10px); + left: 0; + border-width: 10px 10px 10px 0; + border-color: transparent #e1e1e1 transparent transparent; +} +.hvr-bubble-left:hover:before, .hvr-bubble-left:focus:before, .hvr-bubble-left:active:before { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); +} + +/* Bubble Float Top */ +.hvr-bubble-float-top { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-bubble-float-top:before { + position: absolute; + z-index: -1; + content: ''; + left: calc(50% - 10px); + top: 0; + border-style: solid; + border-width: 0 10px 10px 10px; + border-color: transparent transparent #e1e1e1 transparent; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-bubble-float-top:hover, .hvr-bubble-float-top:focus, .hvr-bubble-float-top:active { + -webkit-transform: translateY(10px); + transform: translateY(10px); +} +.hvr-bubble-float-top:hover:before, .hvr-bubble-float-top:focus:before, .hvr-bubble-float-top:active:before { + -webkit-transform: translateY(-10px); + transform: translateY(-10px); +} + +/* Bubble Float Right */ +.hvr-bubble-float-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-bubble-float-right:before { + position: absolute; + z-index: -1; + top: calc(50% - 10px); + right: 0; + content: ''; + border-style: solid; + border-width: 10px 0 10px 10px; + border-color: transparent transparent transparent #e1e1e1; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-bubble-float-right:hover, .hvr-bubble-float-right:focus, .hvr-bubble-float-right:active { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); +} +.hvr-bubble-float-right:hover:before, .hvr-bubble-float-right:focus:before, .hvr-bubble-float-right:active:before { + -webkit-transform: translateX(10px); + transform: translateX(10px); +} + +/* Bubble Float Bottom */ +.hvr-bubble-float-bottom { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-bubble-float-bottom:before { + position: absolute; + z-index: -1; + content: ''; + left: calc(50% - 10px); + bottom: 0; + border-style: solid; + border-width: 10px 10px 0 10px; + border-color: #e1e1e1 transparent transparent transparent; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-bubble-float-bottom:hover, .hvr-bubble-float-bottom:focus, .hvr-bubble-float-bottom:active { + -webkit-transform: translateY(-10px); + transform: translateY(-10px); +} +.hvr-bubble-float-bottom:hover:before, .hvr-bubble-float-bottom:focus:before, .hvr-bubble-float-bottom:active:before { + -webkit-transform: translateY(10px); + transform: translateY(10px); +} + +/* Bubble Float Left */ +.hvr-bubble-float-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-bubble-float-left:before { + position: absolute; + z-index: -1; + content: ''; + top: calc(50% - 10px); + left: 0; + border-style: solid; + border-width: 10px 10px 10px 0; + border-color: transparent #e1e1e1 transparent transparent; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; +} +.hvr-bubble-float-left:hover, .hvr-bubble-float-left:focus, .hvr-bubble-float-left:active { + -webkit-transform: translateX(10px); + transform: translateX(10px); +} +.hvr-bubble-float-left:hover:before, .hvr-bubble-float-left:focus:before, .hvr-bubble-float-left:active:before { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); +} + +/* ICONS */ +/* Icon Back */ +.hvr-icon-back { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.1s; + transition-duration: 0.1s; +} +.hvr-icon-back .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.1s; + transition-duration: 0.1s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-icon-back:hover .hvr-icon, .hvr-icon-back:focus .hvr-icon, .hvr-icon-back:active .hvr-icon { + -webkit-transform: translateX(-4px); + transform: translateX(-4px); +} + +/* Icon Forward */ +.hvr-icon-forward { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.1s; + transition-duration: 0.1s; +} +.hvr-icon-forward .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.1s; + transition-duration: 0.1s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-icon-forward:hover .hvr-icon, .hvr-icon-forward:focus .hvr-icon, .hvr-icon-forward:active .hvr-icon { + -webkit-transform: translateX(4px); + transform: translateX(4px); +} + +/* Icon Down */ +@-webkit-keyframes hvr-icon-down { + 0%, + 50%, + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 25%, + 75% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } +} +@keyframes hvr-icon-down { + 0%, + 50%, + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 25%, + 75% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } +} +/* Icon Down */ +.hvr-icon-down { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-icon-down .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); +} +.hvr-icon-down:hover .hvr-icon, .hvr-icon-down:focus .hvr-icon, .hvr-icon-down:active .hvr-icon { + -webkit-animation-name: hvr-icon-down; + animation-name: hvr-icon-down; + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} + +/* Icon Up */ +@-webkit-keyframes hvr-icon-up { + 0%, + 50%, + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 25%, + 75% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } +} +@keyframes hvr-icon-up { + 0%, + 50%, + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 25%, + 75% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } +} +/* Icon Up */ +.hvr-icon-up { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-icon-up .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); +} +.hvr-icon-up:hover .hvr-icon, .hvr-icon-up:focus .hvr-icon, .hvr-icon-up:active .hvr-icon { + -webkit-animation-name: hvr-icon-up; + animation-name: hvr-icon-up; + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} + +/* Icon Spin */ +.hvr-icon-spin { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-icon-spin .hvr-icon { + -webkit-transition-duration: 1s; + transition-duration: 1s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; +} +.hvr-icon-spin:hover .hvr-icon, .hvr-icon-spin:focus .hvr-icon, .hvr-icon-spin:active .hvr-icon { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); +} + +/* Icon Drop */ +@-webkit-keyframes hvr-icon-drop { + 0% { + opacity: 0; + } + 50% { + opacity: 0; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } + 51%, + 100% { + opacity: 1; + } +} +@keyframes hvr-icon-drop { + 0% { + opacity: 0; + } + 50% { + opacity: 0; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + } + 51%, + 100% { + opacity: 1; + } +} +/* Icon Drop */ +.hvr-icon-drop { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-icon-drop .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); +} +.hvr-icon-drop:hover .hvr-icon, .hvr-icon-drop:focus .hvr-icon, .hvr-icon-drop:active .hvr-icon { + opacity: 0; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-animation-name: hvr-icon-drop; + animation-name: hvr-icon-drop; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); + animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); +} + +/* Icon Fade */ +.hvr-icon-fade { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-icon-fade .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-property: color; + transition-property: color; +} +.hvr-icon-fade:hover .hvr-icon, .hvr-icon-fade:focus .hvr-icon, .hvr-icon-fade:active .hvr-icon { + color: #0F9E5E; +} + +/* Icon Float Away */ +@-webkit-keyframes hvr-icon-float-away { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translateY(-1em); + transform: translateY(-1em); + } +} +@keyframes hvr-icon-float-away { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translateY(-1em); + transform: translateY(-1em); + } +} +/* Icon Float Away */ +.hvr-icon-float-away { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-icon-float-away .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.hvr-icon-float-away:hover .hvr-icon, .hvr-icon-float-away:focus .hvr-icon, .hvr-icon-float-away:active .hvr-icon { + -webkit-animation-name: hvr-icon-float-away; + animation-name: hvr-icon-float-away; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} + +/* Icon Sink Away */ +@-webkit-keyframes hvr-icon-sink-away { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translateY(1em); + transform: translateY(1em); + } +} +@keyframes hvr-icon-sink-away { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + -webkit-transform: translateY(1em); + transform: translateY(1em); + } +} +/* Icon Sink Away */ +.hvr-icon-sink-away { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-icon-sink-away .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} +.hvr-icon-sink-away:hover .hvr-icon, .hvr-icon-sink-away:focus .hvr-icon, .hvr-icon-sink-away:active .hvr-icon { + -webkit-animation-name: hvr-icon-sink-away; + animation-name: hvr-icon-sink-away; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; +} + +/* Icon Grow */ +.hvr-icon-grow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-grow .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-icon-grow:hover .hvr-icon, .hvr-icon-grow:focus .hvr-icon, .hvr-icon-grow:active .hvr-icon { + -webkit-transform: scale(1.3) translateZ(0); + transform: scale(1.3) translateZ(0); +} + +/* Icon Shrink */ +.hvr-icon-shrink { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-shrink .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-icon-shrink:hover .hvr-icon, .hvr-icon-shrink:focus .hvr-icon, .hvr-icon-shrink:active .hvr-icon { + -webkit-transform: scale(0.8); + transform: scale(0.8); +} + +/* Icon Pulse */ +@-webkit-keyframes hvr-icon-pulse { + 25% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + 75% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } +} +@keyframes hvr-icon-pulse { + 25% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + 75% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } +} +.hvr-icon-pulse { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-icon-pulse .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-icon-pulse:hover .hvr-icon, .hvr-icon-pulse:focus .hvr-icon, .hvr-icon-pulse:active .hvr-icon { + -webkit-animation-name: hvr-icon-pulse; + animation-name: hvr-icon-pulse; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +/* Icon Pulse Grow */ +@-webkit-keyframes hvr-icon-pulse-grow { + to { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } +} +@keyframes hvr-icon-pulse-grow { + to { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } +} +.hvr-icon-pulse-grow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-icon-pulse-grow .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-icon-pulse-grow:hover .hvr-icon, .hvr-icon-pulse-grow:focus .hvr-icon, .hvr-icon-pulse-grow:active .hvr-icon { + -webkit-animation-name: hvr-icon-pulse-grow; + animation-name: hvr-icon-pulse-grow; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +/* Icon Pulse Shrink */ +@-webkit-keyframes hvr-icon-pulse-shrink { + to { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } +} +@keyframes hvr-icon-pulse-shrink { + to { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } +} +.hvr-icon-pulse-shrink { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} +.hvr-icon-pulse-shrink .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-icon-pulse-shrink:hover .hvr-icon, .hvr-icon-pulse-shrink:focus .hvr-icon, .hvr-icon-pulse-shrink:active .hvr-icon { + -webkit-animation-name: hvr-icon-pulse-shrink; + animation-name: hvr-icon-pulse-shrink; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +/* Icon Push */ +@-webkit-keyframes hvr-icon-push { + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + } +} +@keyframes hvr-icon-push { + 50% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + } +} +.hvr-icon-push { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-push .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-icon-push:hover .hvr-icon, .hvr-icon-push:focus .hvr-icon, .hvr-icon-push:active .hvr-icon { + -webkit-animation-name: hvr-icon-push; + animation-name: hvr-icon-push; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Icon Pop */ +@-webkit-keyframes hvr-icon-pop { + 50% { + -webkit-transform: scale(1.5); + transform: scale(1.5); + } +} +@keyframes hvr-icon-pop { + 50% { + -webkit-transform: scale(1.5); + transform: scale(1.5); + } +} +.hvr-icon-pop { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-pop .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-icon-pop:hover .hvr-icon, .hvr-icon-pop:focus .hvr-icon, .hvr-icon-pop:active .hvr-icon { + -webkit-animation-name: hvr-icon-pop; + animation-name: hvr-icon-pop; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Icon Bounce */ +.hvr-icon-bounce { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-bounce .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-icon-bounce:hover .hvr-icon, .hvr-icon-bounce:focus .hvr-icon, .hvr-icon-bounce:active .hvr-icon { + -webkit-transform: scale(1.5); + transform: scale(1.5); + -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); + transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); +} + +/* Icon Rotate */ +.hvr-icon-rotate { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-rotate .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-icon-rotate:hover .hvr-icon, .hvr-icon-rotate:focus .hvr-icon, .hvr-icon-rotate:active .hvr-icon { + -webkit-transform: rotate(20deg); + transform: rotate(20deg); +} + +/* Icon Grow Rotate */ +.hvr-icon-grow-rotate { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-grow-rotate .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-icon-grow-rotate:hover .hvr-icon, .hvr-icon-grow-rotate:focus .hvr-icon, .hvr-icon-grow-rotate:active .hvr-icon { + -webkit-transform: scale(1.5) rotate(12deg); + transform: scale(1.5) rotate(12deg); +} + +/* Icon Float */ +.hvr-icon-float { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-float .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-icon-float:hover .hvr-icon, .hvr-icon-float:focus .hvr-icon, .hvr-icon-float:active .hvr-icon { + -webkit-transform: translateY(-4px); + transform: translateY(-4px); +} + +/* Icon Sink */ +.hvr-icon-sink { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-sink .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.hvr-icon-sink:hover .hvr-icon, .hvr-icon-sink:focus .hvr-icon, .hvr-icon-sink:active .hvr-icon { + -webkit-transform: translateY(4px); + transform: translateY(4px); +} + +/* Icon Bob */ +@-webkit-keyframes hvr-icon-bob { + 0% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + 50% { + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } + 100% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } +} +@keyframes hvr-icon-bob { + 0% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + 50% { + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } + 100% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } +} +@-webkit-keyframes hvr-icon-bob-float { + 100% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } +} +@keyframes hvr-icon-bob-float { + 100% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } +} +.hvr-icon-bob { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-bob .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); +} +.hvr-icon-bob:hover .hvr-icon, .hvr-icon-bob:focus .hvr-icon, .hvr-icon-bob:active .hvr-icon { + -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob; + animation-name: hvr-icon-bob-float, hvr-icon-bob; + -webkit-animation-duration: .3s, 1.5s; + animation-duration: .3s, 1.5s; + -webkit-animation-delay: 0s, .3s; + animation-delay: 0s, .3s; + -webkit-animation-timing-function: ease-out, ease-in-out; + animation-timing-function: ease-out, ease-in-out; + -webkit-animation-iteration-count: 1, infinite; + animation-iteration-count: 1, infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-direction: normal, alternate; + animation-direction: normal, alternate; +} + +/* Icon Hang */ +@-webkit-keyframes hvr-icon-hang { + 0% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } + 50% { + -webkit-transform: translateY(2px); + transform: translateY(2px); + } + 100% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } +} +@keyframes hvr-icon-hang { + 0% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } + 50% { + -webkit-transform: translateY(2px); + transform: translateY(2px); + } + 100% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } +} +@-webkit-keyframes hvr-icon-hang-sink { + 100% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } +} +@keyframes hvr-icon-hang-sink { + 100% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } +} +.hvr-icon-hang { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-hang .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); +} +.hvr-icon-hang:hover .hvr-icon, .hvr-icon-hang:focus .hvr-icon, .hvr-icon-hang:active .hvr-icon { + -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang; + animation-name: hvr-icon-hang-sink, hvr-icon-hang; + -webkit-animation-duration: .3s, 1.5s; + animation-duration: .3s, 1.5s; + -webkit-animation-delay: 0s, .3s; + animation-delay: 0s, .3s; + -webkit-animation-timing-function: ease-out, ease-in-out; + animation-timing-function: ease-out, ease-in-out; + -webkit-animation-iteration-count: 1, infinite; + animation-iteration-count: 1, infinite; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-direction: normal, alternate; + animation-direction: normal, alternate; +} + +/* Icon Wobble Horizontal */ +@-webkit-keyframes hvr-icon-wobble-horizontal { + 16.65% { + -webkit-transform: translateX(6px); + transform: translateX(6px); + } + 33.3% { + -webkit-transform: translateX(-5px); + transform: translateX(-5px); + } + 49.95% { + -webkit-transform: translateX(4px); + transform: translateX(4px); + } + 66.6% { + -webkit-transform: translateX(-2px); + transform: translateX(-2px); + } + 83.25% { + -webkit-transform: translateX(1px); + transform: translateX(1px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes hvr-icon-wobble-horizontal { + 16.65% { + -webkit-transform: translateX(6px); + transform: translateX(6px); + } + 33.3% { + -webkit-transform: translateX(-5px); + transform: translateX(-5px); + } + 49.95% { + -webkit-transform: translateX(4px); + transform: translateX(4px); + } + 66.6% { + -webkit-transform: translateX(-2px); + transform: translateX(-2px); + } + 83.25% { + -webkit-transform: translateX(1px); + transform: translateX(1px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +.hvr-icon-wobble-horizontal { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-wobble-horizontal .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); +} +.hvr-icon-wobble-horizontal:hover .hvr-icon, .hvr-icon-wobble-horizontal:focus .hvr-icon, .hvr-icon-wobble-horizontal:active .hvr-icon { + -webkit-animation-name: hvr-icon-wobble-horizontal; + animation-name: hvr-icon-wobble-horizontal; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Icon Wobble Vertical */ +@-webkit-keyframes hvr-icon-wobble-vertical { + 16.65% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } + 33.3% { + -webkit-transform: translateY(-5px); + transform: translateY(-5px); + } + 49.95% { + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + 66.6% { + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } + 83.25% { + -webkit-transform: translateY(1px); + transform: translateY(1px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes hvr-icon-wobble-vertical { + 16.65% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } + 33.3% { + -webkit-transform: translateY(-5px); + transform: translateY(-5px); + } + 49.95% { + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + 66.6% { + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } + 83.25% { + -webkit-transform: translateY(1px); + transform: translateY(1px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +.hvr-icon-wobble-vertical { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-wobble-vertical .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); +} +.hvr-icon-wobble-vertical:hover .hvr-icon, .hvr-icon-wobble-vertical:focus .hvr-icon, .hvr-icon-wobble-vertical:active .hvr-icon { + -webkit-animation-name: hvr-icon-wobble-vertical; + animation-name: hvr-icon-wobble-vertical; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Icon Buzz */ +@-webkit-keyframes hvr-icon-buzz { + 50% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 100% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } +} +@keyframes hvr-icon-buzz { + 50% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 100% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } +} +.hvr-icon-buzz { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-buzz .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); +} +.hvr-icon-buzz:hover .hvr-icon, .hvr-icon-buzz:focus .hvr-icon, .hvr-icon-buzz:active .hvr-icon { + -webkit-animation-name: hvr-icon-buzz; + animation-name: hvr-icon-buzz; + -webkit-animation-duration: 0.15s; + animation-duration: 0.15s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +/* Icon Buzz Out */ +@-webkit-keyframes hvr-icon-buzz-out { + 10% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 20% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 30% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 40% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 50% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 60% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 70% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 80% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 90% { + -webkit-transform: translateX(1px) rotate(0); + transform: translateX(1px) rotate(0); + } + 100% { + -webkit-transform: translateX(-1px) rotate(0); + transform: translateX(-1px) rotate(0); + } +} +@keyframes hvr-icon-buzz-out { + 10% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 20% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 30% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 40% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 50% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 60% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 70% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 80% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 90% { + -webkit-transform: translateX(1px) rotate(0); + transform: translateX(1px) rotate(0); + } + 100% { + -webkit-transform: translateX(-1px) rotate(0); + transform: translateX(-1px) rotate(0); + } +} +.hvr-icon-buzz-out { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.hvr-icon-buzz-out .hvr-icon { + -webkit-transform: translateZ(0); + transform: translateZ(0); +} +.hvr-icon-buzz-out:hover .hvr-icon, .hvr-icon-buzz-out:focus .hvr-icon, .hvr-icon-buzz-out:active .hvr-icon { + -webkit-animation-name: hvr-icon-buzz-out; + animation-name: hvr-icon-buzz-out; + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* CURLS */ +/* Curl Top Left */ +.hvr-curl-top-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; +} +.hvr-curl-top-left:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + top: 0; + left: 0; + background: white; + /* IE9 */ + background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000'); + /*For IE7-8-9*/ + z-index: 1000; + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: width, height; + transition-property: width, height; +} +.hvr-curl-top-left:hover:before, .hvr-curl-top-left:focus:before, .hvr-curl-top-left:active:before { + width: 25px; + height: 25px; +} + +/* Curl Top Right */ +.hvr-curl-top-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; +} +.hvr-curl-top-right:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + top: 0; + right: 0; + background: white; + /* IE9 */ + background: linear-gradient(225deg, white 45%, #aaa 50%, #ccc 56%, white 80%); + box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: width, height; + transition-property: width, height; +} +.hvr-curl-top-right:hover:before, .hvr-curl-top-right:focus:before, .hvr-curl-top-right:active:before { + width: 25px; + height: 25px; +} + +/* Curl Bottom Right */ +.hvr-curl-bottom-right { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; +} +.hvr-curl-bottom-right:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + bottom: 0; + right: 0; + background: white; + /* IE9 */ + background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%); + box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: width, height; + transition-property: width, height; +} +.hvr-curl-bottom-right:hover:before, .hvr-curl-bottom-right:focus:before, .hvr-curl-bottom-right:active:before { + width: 25px; + height: 25px; +} + +/* Curl Bottom Left */ +.hvr-curl-bottom-left { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; +} +.hvr-curl-bottom-left:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + bottom: 0; + left: 0; + background: white; + /* IE9 */ + background: linear-gradient(45deg, white 45%, #aaa 50%, #ccc 56%, white 80%); + box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: width, height; + transition-property: width, height; +} +.hvr-curl-bottom-left:hover:before, .hvr-curl-bottom-left:focus:before, .hvr-curl-bottom-left:active:before { + width: 25px; + height: 25px; +} + +/*# sourceMappingURL=hover.css.map */ diff --git a/website/img1.jpg b/website/img1.jpg new file mode 100644 index 0000000..ea45fe8 Binary files /dev/null and b/website/img1.jpg differ diff --git a/website/ip.txt b/website/ip.txt new file mode 100644 index 0000000..e56ea71 --- /dev/null +++ b/website/ip.txt @@ -0,0 +1 @@ +127.0.0.1 \ No newline at end of file diff --git a/website/k.json b/website/k.json new file mode 100644 index 0000000..e69de29 diff --git a/website/libraries/font_awesome.css b/website/libraries/font_awesome.css new file mode 100644 index 0000000..b7610d2 --- /dev/null +++ b/website/libraries/font_awesome.css @@ -0,0 +1,4 @@ +/*! + * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome + * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) + */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} \ No newline at end of file diff --git a/website/logo.jpeg b/website/logo.jpeg new file mode 100644 index 0000000..3d44a8e Binary files /dev/null and b/website/logo.jpeg differ diff --git a/website/map.png b/website/map.png new file mode 100644 index 0000000..26b1f67 Binary files /dev/null and b/website/map.png differ diff --git a/website/mapr.png b/website/mapr.png new file mode 100644 index 0000000..457eae6 Binary files /dev/null and b/website/mapr.png differ diff --git a/website/marathon.html b/website/marathon.html new file mode 100644 index 0000000..82d24c0 --- /dev/null +++ b/website/marathon.html @@ -0,0 +1,48 @@ + + + + Race Register Form + + +

Race Registration!

+
+
+ + + + +
+

Select a Race:

+
+ + +
+
+ + +
+
+ + +
+
+ + + + +
+
+ + +
+
+ +
+
+ + \ No newline at end of file diff --git a/website/navbarclick.js b/website/navbarclick.js new file mode 100644 index 0000000..6c18a52 --- /dev/null +++ b/website/navbarclick.js @@ -0,0 +1,5 @@ +const object = { name: "John Smith" }; +const json = JSON.stringify(object); // {"name":"John Smith"} +console.log(json); +const unquoted = json.replace(/"([^"]+)":/g, '$1:'); +console.log(unquoted); // {name:"John Smith"} \ No newline at end of file diff --git a/website/navigacia.css b/website/navigacia.css new file mode 100644 index 0000000..e69de29 diff --git a/website/navigacia.html b/website/navigacia.html new file mode 100644 index 0000000..e87b4c6 --- /dev/null +++ b/website/navigacia.html @@ -0,0 +1,12 @@ + + + + + + + Navigácia + + + + + \ No newline at end of file diff --git a/website/people.json b/website/people.json new file mode 100644 index 0000000..9f889da --- /dev/null +++ b/website/people.json @@ -0,0 +1,24 @@ +[ + { + "id": "1", + "firstName": "John", + "lastName": "Doe" + }, + { + "id": "2", + "firstName": "Mary", + "lastName": "Peterson" + }, + { + "id": "3", + "firstName": "George", + "lastName": "Hansen" + } +] +var mainContainer = document.getElementById("myData"); + var div = document.createElement("div"); + div.innerHTML = escape(data[1]["description"]["description_s"] + "
"); + Kql = unescape(data[1]["description"]["description_s"]); + + mainContainer.appendChild(div); + } \ No newline at end of file diff --git a/website/prezentacia_wikispot (1).pptx b/website/prezentacia_wikispot (1).pptx new file mode 100644 index 0000000..d525f77 Binary files /dev/null and b/website/prezentacia_wikispot (1).pptx differ diff --git a/websites/samsung1.png b/website/samsung1.png similarity index 100% rename from websites/samsung1.png rename to website/samsung1.png diff --git a/website/sensors.js b/website/sensors.js new file mode 100644 index 0000000..68c0508 --- /dev/null +++ b/website/sensors.js @@ -0,0 +1,13 @@ +fetch("http://192.168.1.105:8000/docs#/default/update_sensors_update_sensor_post") + .then(function(response1){ + return response.json(); + }) + .then(function(data1){ + appendData(data1); + }) + .catch(function(err1){ + + }); + function appendChild(data1){ + + } \ No newline at end of file diff --git a/website/stiahnuť (1).jpg b/website/stiahnuť (1).jpg new file mode 100644 index 0000000..1bc93de Binary files /dev/null and b/website/stiahnuť (1).jpg differ diff --git a/website/stiahnuť.jpg b/website/stiahnuť.jpg new file mode 100644 index 0000000..0312dbb Binary files /dev/null and b/website/stiahnuť.jpg differ diff --git a/website/test.txt b/website/test.txt new file mode 100644 index 0000000..4b1b160 --- /dev/null +++ b/website/test.txt @@ -0,0 +1 @@ +Lorem ipsum dolor sit amet consectetur adipisicing elit. Error placeat optio facere nobis, ex tempore aut illo ipsum modi deserunt doloremque, harum ad ipsa perferendis assumenda cum magni perspiciatis delectus. \ No newline at end of file diff --git a/website/title.js b/website/title.js new file mode 100644 index 0000000..0b156ae --- /dev/null +++ b/website/title.js @@ -0,0 +1,26 @@ +fetch("http://192.168.1.105:8000/devices_list") + .then(function(response){ + return response.json(); + }) + .then(function(data){ + appendData(data); + }) + .catch(function(err){ + + }); + function appendData(data){ + console.log(data); + console.log(data[1]["files"][0]); + var myJson1 = JSON.stringify(data[1]["description"]["title"]); + var uJson1 = myJson1.replace(/\"/g, ""); + var str1 = (uJson1); + var str_esc1 = escape(str1); + console.log(str_esc1 + "
"); + console.log(unescape(str_esc1)); + var mainContainer = document.getElementById("myTitle"); + var div1 = document.createElement("p"); + div.setAttribute("id", "titleData") + div.innerHTML = unescape(str_esc1); + + mainContainer.appendChild(div1); + } \ No newline at end of file diff --git a/website/travelly.png b/website/travelly.png new file mode 100644 index 0000000..82b0613 Binary files /dev/null and b/website/travelly.png differ diff --git a/website/unknown.png b/website/unknown.png new file mode 100644 index 0000000..6d4ffa6 Binary files /dev/null and b/website/unknown.png differ diff --git a/websites/wikispot-white.png b/website/wikispot-white.png similarity index 100% rename from websites/wikispot-white.png rename to website/wikispot-white.png diff --git a/website/wikispot.png b/website/wikispot.png new file mode 100644 index 0000000..10d4fac Binary files /dev/null and b/website/wikispot.png differ diff --git a/website/wikispotphone.png b/website/wikispotphone.png new file mode 100644 index 0000000..8cb465f Binary files /dev/null and b/website/wikispotphone.png differ diff --git a/websites/WikiSpotCon.html b/websites/WikiSpotCon.html deleted file mode 100644 index 6b4f73a..0000000 --- a/websites/WikiSpotCon.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - WikiSpot - - - - - - - -
- -
- - \ No newline at end of file diff --git a/websites/WikiSpotLoc.html b/websites/WikiSpotLoc.html deleted file mode 100644 index b2b0f3a..0000000 --- a/websites/WikiSpotLoc.html +++ /dev/null @@ -1,158 +0,0 @@ - - - - WikiSpot - - - - - - - - - -
- - - home - - -
- - - - - -
-
-
-
-
- wsData1img -
-
- - -
-
-
-
-
- wsData2img -
-
- - - - -
-
-
-
-
- wsData3img -
-
- - - - -
-
-
-
-
- wsData4img -
-
- - - - -
-
-
-
-
- wsData5img -
-
- - diff --git a/websites/WikiSpotPro.html b/websites/WikiSpotPro.html deleted file mode 100644 index 6b4f73a..0000000 --- a/websites/WikiSpotPro.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - WikiSpot - - - - - - - -
- -
- - \ No newline at end of file diff --git a/websites/WikiSpotWS.html b/websites/WikiSpotWS.html deleted file mode 100644 index 13f8ef9..0000000 --- a/websites/WikiSpotWS.html +++ /dev/null @@ -1,146 +0,0 @@ - - - - - - - - Flextest - - - - -
- -
- - - - - -
- # -
-
Kniznica
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.
-
-
▼
-
- -
- # -
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.
-
-
Teplota
-
-
-
-
- -
- # -
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.
-
- - - - -
- # -
-
Kniznica
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.
-
-
▼
-
- -
- # -
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.
-
-
Teplota
-
-
-
-
- -
- # -
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.
-
- - - - -
- # -
-
Kniznica
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.
-
-
▼
-
- -
- # -
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.
-
-
Teplota
-
-
-
-
- -
- # -
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.
-
- - - - -
- # -
-
Kniznica
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.
-
-
▼
-
- -
- # -
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.
-
-
Teplota
-
-
-
-
- -
- # -
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.
-
- - - - - \ No newline at end of file diff --git a/websites/desc_short.js b/websites/desc_short.js deleted file mode 100644 index 809c3c5..0000000 --- a/websites/desc_short.js +++ /dev/null @@ -1,118 +0,0 @@ -// fetch("http://192.168.1.105:8000/devices_list") -// .then(function(response){ -// return response.json(); -// }) -// .then(function(data){ -// appendData(data); -// }) -// .catch(function(err){ -// console.log(err); - -// }); -// function appendData(data){ -// console.log(data); -// console.log(data[1]["files"][0]); -// var myJson = JSON.stringify(data[1]["description"]["description_s"]); -// var myJson1 = JSON.stringify(data[1]["description"]["title"]); -// var myJson2 = JSON.stringify(data[1]["description"]["description_l"]); -// var uJson = myJson.replace(/\"/g, ""); -// var str = (uJson); -// var str_esc = escape(str); -// console.log(str_esc + "
" + myJson1); -// console.log(unescape(str_esc)); -// var mainContainer = document.getElementById("hou1"); -// var div = document.createElement("div"); -// div.setAttribute("id", "hou"); -// div.innerHTML = unescape(str_esc); - -// mainContainer.appendChild(div); - -// var mainContainer1 = document.getElementById("hey1"); -// var uJson1 = myJson1.replace(/\"/g, ""); -// var div1 = document.createElement("div"); -// div1.setAttribute("id", "hey"); -// div1.innerHTML = unescape(escape(uJson1)); -// var uJson1 = myJson1.replace(/\"/g, ""); - -// mainContainer1.appendChild(div1); -// } -$(document).ready(function() { - let urls = ["http://192.168.1.105:8000/files/0/library.jpg", "http://192.168.1.105:8000/files/0/library.jpg", "http://192.168.1.105:8000/files/0/library.jpg"]; - let descriptions = ["here", "there"]; - let n = 1; - function append_element(urls, descriptions, n) { - - let template = `
-
- # -
-
-
-
-
▼
-
- -
- # -
${descriptions[0]}
-
-
Teplota
-
-
-
-
- -
- # -
${descriptions[1]}
-
`; - - $("body").append(template); - - } - append_element(urls, descriptions, n); - - $.get("http://192.168.1.105:8000/devices_list", function(data) { - console.log(data); - var myJson = JSON.stringify(data[1]["description"]["description_s"]); - var myJson1 = JSON.stringify(data[1]["description"]["title"]); - console.log(myJson); - console.log(myJson1); - uJson = myJson.replace(/\"/g, ""); - var str = (uJson); - var str_esc = escape(str); - console.log(str_esc + "
" + myJson); - console.log(unescape(str_esc)); - var main = document.getElementById("hou1"); - var div = document.createElement("div"); - div.setAttribute("id", "hou"); - div.innerHTML = unescape(str_esc); - - main.appendChild(div); - - var sub = document.getElementById("hey1"); - var uJson1 = myJson1.replace(/\"/g, ""); - var div1 = document.createElement("div"); - div1.setAttribute("id", "hey"); - div1.innerHTML = unescape(escape(uJson1)); - - sub.appendChild(div1); - - - - ID = 0; - $.get(`http://192.168.1.105:8000/${ID}/sensors`, function(data1) { - console.log(data1); - var sens = JSON.stringify(data1["teplota"]); - console.log(sens); - var uSens = sens.replace(/\"/g, ""); - var heat = document.getElementById("heat"); - var div2 = document.createElement("div"); - div2.setAttribute("id", "hot"); - div2.innerHTML = unescape(escape(uSens)); - - heat.appendChild(div2); -}) - }) - -})