├── backend ├── auth │ ├── samples │ ├── trainer.py │ ├── sample.py │ └── recoganize.py ├── config.py ├── helper.py ├── db.py ├── command.py └── feature.py ├── tempCodeRunnerFile.py ├── requirements.txt ├── frontend ├── assets │ ├── img │ │ └── logo.ico │ ├── audio │ │ └── start_sound.mp3 │ └── vendore │ │ └── texllate │ │ ├── style.css │ │ ├── jquery.fittext.js │ │ ├── jquery.lettering.js │ │ └── animate.css ├── controller.js ├── main.js ├── style.css ├── script.js └── index.html ├── .vscode └── settings.json ├── .gitignore ├── run.py ├── README.md ├── main.py └── LICENSE /backend/auth/samples: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tempCodeRunnerFile.py: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /backend/config.py: -------------------------------------------------------------------------------- 1 | ASSISTANT_NAME = "jarvis" -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hustler-kunal/Jarvis-2025/HEAD/requirements.txt -------------------------------------------------------------------------------- /frontend/assets/img/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hustler-kunal/Jarvis-2025/HEAD/frontend/assets/img/logo.ico -------------------------------------------------------------------------------- /frontend/assets/audio/start_sound.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hustler-kunal/Jarvis-2025/HEAD/frontend/assets/audio/start_sound.mp3 -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "python.pythonPath": "C:\\Users\\ANKIT PATHAK\\AppData\\Local\\Programs\\Python\\Python310\\python.exe" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore the envJarvis directory 2 | # match common casings 3 | /envjarvis/ 4 | /envJarvis/ 5 | 6 | # Ignore any envJarvis backups 7 | /envJarvis_backup/ 8 | 9 | # Ignore Python cache and compiled files 10 | __pycache__/ 11 | *.py[cod] 12 | 13 | # Ignore contact.csv 14 | contacts.csv 15 | 16 | # Ignore jarvis.db 17 | jarvis.db 18 | 19 | # Ignore Python bytecode files in backend 20 | /backend/__pycache__/ 21 | 22 | # Ignore backend cookie.json 23 | /backend/cookie.json 24 | -------------------------------------------------------------------------------- /backend/helper.py: -------------------------------------------------------------------------------- 1 | 2 | import re 3 | 4 | 5 | def extract_yt_term(command): 6 | pattern = r'play\s+(.*?)\s+on\s+youtube' 7 | match = re.search(pattern, command,re.IGNORECASE) 8 | return match.group(1) if match else None 9 | 10 | 11 | def remove_words(input_string, words_to_remove): 12 | words = input_string.split() 13 | 14 | filtered_words = [word for word in words if word.lower() not in words_to_remove] 15 | 16 | result_string = ' '.join(filtered_words) 17 | 18 | return result_string 19 | 20 | -------------------------------------------------------------------------------- /run.py: -------------------------------------------------------------------------------- 1 | import multiprocessing 2 | 3 | 4 | def startJarvis(): 5 | print ("Process 1 Starting...") 6 | from main import start 7 | start() 8 | 9 | def listenHotword(): 10 | print ("Process 2 Starting...") 11 | from backend.feature import hotword 12 | hotword() 13 | 14 | if __name__ == "__main__": 15 | process1 = multiprocessing.Process(target=startJarvis) 16 | process2 = multiprocessing.Process(target=listenHotword) 17 | process1.start() 18 | process2.start() 19 | process1.join() 20 | 21 | if process2.is_alive(): 22 | process2.terminate() 23 | print("Process 2 terminated.") 24 | process2.join() 25 | 26 | print("System is terminated.") -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Jarvis-2025 2 | 3 | A desktop assistant project that uses Eel for the frontend and a Python backend with speech, hotword detection, and Hugging Face chat integration. 4 | 5 | Quick start 6 | 7 | 1. Create and activate a virtualenv (recommended): 8 | 9 | ```powershell 10 | python -m venv .\envJarvis 11 | & '.\envJarvis\Scripts\Activate.ps1' 12 | python -m pip install --upgrade pip 13 | python -m pip install -r requirements.txt 14 | ``` 15 | 16 | 2. (Optional) Export your Hugging Face cookies JSON and save to `backend/cookie.json` (private): 17 | 18 | - Export cookies for huggingface.co as a JSON array and place the file at `backend/cookie.json`. 19 | 20 | 3. Run the app: 21 | 22 | ```powershell 23 | python .\run.py 24 | ``` 25 | 26 | Notes 27 | - `backend/cookie.json` is ignored in `.gitignore` because it contains auth cookies. Keep it private. 28 | - `envJarvis/` is ignored. 29 | 30 | License: MIT 31 | -------------------------------------------------------------------------------- /frontend/assets/vendore/texllate/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | background: #282828; 10 | color: #eee; 11 | font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; 12 | font-size: 14px; 13 | } 14 | 15 | .glow { 16 | text-shadow: 0 0 0 rgba(0, 0, 0, 0); 17 | -webkit-transition: text-shadow 1s linear; 18 | -moz-transition: text-shadow 1s linear; 19 | -o-transition: text-shadow 1s linear; 20 | transition: text-shadow 1s linear; 21 | } 22 | 23 | .glow.in { 24 | text-shadow: 25 | 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8), 26 | 0 0 0.5em rgba(255, 255, 255, 0.3); 27 | } 28 | 29 | .fade { 30 | opacity: 0; 31 | -webkit-transition: opacity 1s linear; 32 | -moz-transition: opacity 1s linear; 33 | -o-transition: opacity 1s linear; 34 | transition: opacity 1s linear; 35 | } 36 | 37 | .fade.in { 38 | opacity: 1; 39 | } 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /main.py: -------------------------------------------------------------------------------- 1 | import os 2 | import eel 3 | from backend.auth import recoganize 4 | from backend.auth.recoganize import AuthenticateFace 5 | from backend.feature import * 6 | from backend.command import * 7 | 8 | 9 | 10 | def start(): 11 | 12 | eel.init("frontend") 13 | 14 | play_assistant_sound() 15 | @eel.expose 16 | def init(): 17 | eel.hideLoader() 18 | speak("Welcome to Jarvis") 19 | speak("Ready for Face Authentication") 20 | flag = recoganize.AuthenticateFace() 21 | if flag ==1: 22 | speak("Face recognized successfully") 23 | eel.hideFaceAuth() 24 | eel.hideFaceAuthSuccess() 25 | speak("Welcome to Your Assistant") 26 | eel.hideStart() 27 | play_assistant_sound() 28 | else: 29 | speak("Face not recognized. Please try again") 30 | 31 | os.system('start msedge.exe --app="http://127.0.0.1:8000/index.html"') 32 | 33 | 34 | 35 | eel.start("index.html", mode=None, host="localhost", block=True) 36 | 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /frontend/assets/vendore/texllate/jquery.fittext.js: -------------------------------------------------------------------------------- 1 | /*global jQuery */ 2 | /*! 3 | * FitText.js 1.1 4 | * 5 | * Copyright 2011, Dave Rupert http://daverupert.com 6 | * Released under the WTFPL license 7 | * http://sam.zoy.org/wtfpl/ 8 | * 9 | * Date: Thu May 05 14:23:00 2011 -0600 10 | */ 11 | 12 | (function( $ ){ 13 | 14 | $.fn.fitText = function( kompressor, options ) { 15 | 16 | // Setup options 17 | var compressor = kompressor || 1, 18 | settings = $.extend({ 19 | 'minFontSize' : Number.NEGATIVE_INFINITY, 20 | 'maxFontSize' : Number.POSITIVE_INFINITY 21 | }, options); 22 | 23 | return this.each(function(){ 24 | 25 | // Store the object 26 | var $this = $(this); 27 | 28 | // Resizer() resizes items based on the object width divided by the compressor * 10 29 | var resizer = function () { 30 | $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); 31 | }; 32 | 33 | // Call once to set. 34 | resizer(); 35 | 36 | // Call on resize. Opera debounces their resize by default. 37 | $(window).on('resize', resizer); 38 | 39 | }); 40 | 41 | }; 42 | 43 | })( jQuery ); -------------------------------------------------------------------------------- /backend/auth/trainer.py: -------------------------------------------------------------------------------- 1 | import cv2 2 | import numpy as np 3 | from PIL import Image #pillow package 4 | import os 5 | 6 | path = 'backend\\auth\\samples' # Path for samples already taken 7 | 8 | recognizer = cv2.face.LBPHFaceRecognizer_create() # Local Binary Patterns Histograms 9 | detector = cv2.CascadeClassifier("backend\\auth\\haarcascade_frontalface_default.xml") 10 | #Haar Cascade classifier is an effective object detection approach 11 | 12 | 13 | def Images_And_Labels(path): # function to fetch the images and labels 14 | 15 | imagePaths = [os.path.join(path,f) for f in os.listdir(path)] 16 | faceSamples=[] 17 | ids = [] 18 | 19 | for imagePath in imagePaths: # to iterate particular image path 20 | 21 | gray_img = Image.open(imagePath).convert('L') # convert it to grayscale 22 | img_arr = np.array(gray_img,'uint8') #creating an array 23 | 24 | id = int(os.path.split(imagePath)[-1].split(".")[1]) 25 | faces = detector.detectMultiScale(img_arr) 26 | 27 | for (x,y,w,h) in faces: 28 | faceSamples.append(img_arr[y:y+h,x:x+w]) 29 | ids.append(id) 30 | 31 | return faceSamples,ids 32 | 33 | print ("Training faces. It will take a few seconds. Wait ...") 34 | 35 | faces,ids = Images_And_Labels(path) 36 | recognizer.train(faces, np.array(ids)) 37 | 38 | recognizer.write('backend\\auth\\trainer\\trainer.yml') # Save the trained model as trainer.yml 39 | 40 | print("Model trained, Now we can recognize your face.") 41 | -------------------------------------------------------------------------------- /backend/auth/sample.py: -------------------------------------------------------------------------------- 1 | import cv2 2 | 3 | cam = cv2.VideoCapture(0, cv2.CAP_DSHOW) #create a video capture object which is helpful to capture videos through webcam 4 | cam.set(3, 640) # set video FrameWidth 5 | cam.set(4, 480) # set video FrameHeight 6 | 7 | 8 | detector = cv2.CascadeClassifier('backend\\auth\\haarcascade_frontalface_default.xml') 9 | #Haar Cascade classifier is an effective object detection approach 10 | 11 | face_id = input("Enter a Numeric user ID here: ") 12 | #Use integer ID for every new face (0,1,2,3,4,5,6,7,8,9........) 13 | 14 | print("Taking samples, look at camera ....... ") 15 | count = 0 # Initializing sampling face count 16 | 17 | while True: 18 | 19 | ret, img = cam.read() #read the frames using the above created object 20 | converted_image = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) #The function converts an input image from one color space to another 21 | faces = detector.detectMultiScale(converted_image, 1.3, 5) 22 | 23 | for (x,y,w,h) in faces: 24 | 25 | cv2.rectangle(img, (x,y), (x+w,y+h), (255,0,0), 2) #used to draw a rectangle on any image 26 | count += 1 27 | 28 | 29 | cv2.imwrite("backend\\auth\\samples\\face." + str(face_id) + '.' + str(count) + ".jpg", converted_image[y:y+h,x:x+w]) 30 | # To capture & Save images into the datasets folder 31 | 32 | cv2.imshow('image', img) #Used to display an image in a window 33 | 34 | k = cv2.waitKey(100) & 0xff # Waits for a pressed key 35 | if k == 27: # Press 'ESC' to stop 36 | break 37 | elif count >= 100: # Take 50 sample (More sample --> More accuracy) 38 | break 39 | 40 | print("Samples taken now closing the program....") 41 | cam.release() 42 | cv2.destroyAllWindows() -------------------------------------------------------------------------------- /frontend/assets/vendore/texllate/jquery.lettering.js: -------------------------------------------------------------------------------- 1 | /*global jQuery */ 2 | /*! 3 | * Lettering.JS 0.6.1 4 | * 5 | * Copyright 2010, Dave Rupert http://daverupert.com 6 | * Released under the WTFPL license 7 | * http://sam.zoy.org/wtfpl/ 8 | * 9 | * Thanks to Paul Irish - http://paulirish.com - for the feedback. 10 | * 11 | * Date: Mon Sep 20 17:14:00 2010 -0600 12 | */ 13 | (function($){ 14 | function injector(t, splitter, klass, after) { 15 | var a = t.text().split(splitter), inject = ''; 16 | if (a.length) { 17 | $(a).each(function(i, item) { 18 | inject += ''+item+''+after; 19 | }); 20 | t.empty().append(inject); 21 | } 22 | } 23 | 24 | var methods = { 25 | init : function() { 26 | 27 | return this.each(function() { 28 | injector($(this), '', 'char', ''); 29 | }); 30 | 31 | }, 32 | 33 | words : function() { 34 | 35 | return this.each(function() { 36 | injector($(this), ' ', 'word', ' '); 37 | }); 38 | 39 | }, 40 | 41 | lines : function() { 42 | 43 | return this.each(function() { 44 | var r = "eefec303079ad17405c889e092e105b0"; 45 | // Because it's hard to split a
tag consistently across browsers, 46 | // (*ahem* IE *ahem*), we replaces all
instances with an md5 hash 47 | // (of the word "split"). If you're trying to use this plugin on that 48 | // md5 hash string, it will fail because you're being ridiculous. 49 | injector($(this).children("br").replaceWith(r).end(), r, 'line', ''); 50 | }); 51 | 52 | } 53 | }; 54 | 55 | $.fn.lettering = function( method ) { 56 | // Method calling logic 57 | if ( method && methods[method] ) { 58 | return methods[ method ].apply( this, [].slice.call( arguments, 1 )); 59 | } else if ( method === 'letters' || ! method ) { 60 | return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array 61 | } 62 | $.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); 63 | return this; 64 | }; 65 | 66 | })(jQuery); -------------------------------------------------------------------------------- /backend/db.py: -------------------------------------------------------------------------------- 1 | import csv 2 | import sqlite3 3 | 4 | conn = sqlite3.connect("jarvis.db") 5 | cursor = conn.cursor() 6 | 7 | query = "CREATE TABLE IF NOT EXISTS sys_command(id integer primary key, name VARCHAR(100), path VARCHAR(1000))" 8 | cursor.execute(query) 9 | query = "CREATE TABLE IF NOT EXISTS web_command(id integer primary key, name VARCHAR(100), url VARCHAR(1000))" 10 | cursor.execute(query) 11 | 12 | 13 | # query = "INSERT INTO sys_command VALUES (null,'obs', 'C:\\Program Files\\obs-studio\\bin\\obs64.exe')" 14 | # cursor.execute(query) 15 | # conn.commit() 16 | 17 | # query = "DELETE FROM sys_command WHERE name='obs'" 18 | # cursor.execute(query) 19 | # conn.commit() 20 | 21 | # testing module 22 | # app_name = "obs" 23 | # cursor.execute('SELECT path FROM sys_command WHERE name IN (?)', (app_name,)) 24 | # results = cursor.fetchall() 25 | # print(results[0][0]) 26 | 27 | 28 | 29 | 30 | # cursor.execute("DROP TABLE IF EXISTS contacts;") 31 | # conn.commit() 32 | # cursor.execute('''CREATE TABLE IF NOT EXISTS contacts (id INTEGER PRIMARY KEY, name VARCHAR(200), Phone VARCHAR(255), email VARCHAR(255) NULL)''') 33 | 34 | 35 | # desired_columns_indices = [0, 20] 36 | 37 | # with open('contacts.csv', 'r', encoding='utf-8') as csvfile: 38 | # csvreader = csv.reader(csvfile) 39 | # for row in csvreader: 40 | # selected_data = [row[i] for i in desired_columns_indices] 41 | # cursor.execute(''' INSERT INTO contacts (id, 'name', 'Phone') VALUES (null, ?,? );''', tuple(selected_data)) 42 | 43 | # # Commit changes and close connection 44 | # conn.commit() 45 | # conn.close() 46 | 47 | # print("Data inserted successfully") 48 | 49 | 50 | # query = "INSERT INTO contacts VALUES (null,'pawan', '1234567890', 'null')" 51 | # cursor.execute(query) 52 | # conn.commit() 53 | 54 | 55 | # query = 'Ankit' 56 | # query = query.strip().lower() # Added parentheses to call the method 57 | 58 | # cursor.execute("SELECT Phone FROM contacts WHERE LOWER(name) LIKE ? OR LOWER(name) LIKE ?", 59 | # ('%' + query + '%', query + '%')) 60 | # results = cursor.fetchall() 61 | # print(results[0][0]) 62 | -------------------------------------------------------------------------------- /frontend/controller.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | // Display Speak Message 3 | eel.expose(DisplayMessage); 4 | function DisplayMessage(message) { 5 | $(".siri-message li:first").text(message); 6 | $(".siri-message").textillate("start"); 7 | } 8 | 9 | eel.expose(ShowHood); 10 | function ShowHood() { 11 | $("#Oval").attr("hidden", false); 12 | $("#SiriWave").attr("hidden", true); 13 | } 14 | 15 | eel.expose(senderText); 16 | function senderText(message) { 17 | var chatBox = document.getElementById("chat-canvas-body"); 18 | if (message.trim() !== "") { 19 | chatBox.innerHTML += `
20 |
21 |
${message}
22 |
`; 23 | 24 | chatBox.scrollTop = chatBox.scrollHeight; 25 | } 26 | } 27 | 28 | eel.expose(receiverText); 29 | function receiverText(message) { 30 | var chatBox = document.getElementById("chat-canvas-body"); 31 | if (message.trim() !== "") { 32 | chatBox.innerHTML += `
33 |
34 |
${message}
35 |
36 |
`; 37 | 38 | // Scroll to the bottom of the chat box 39 | chatBox.scrollTop = chatBox.scrollHeight; 40 | } 41 | } 42 | eel.expose(hideLoader); 43 | function hideLoader() { 44 | $("#Loader").attr("hidden", true); 45 | $("#FaceAuth").attr("hidden", false); 46 | } 47 | // Hide Face auth and display Face Auth success animation 48 | eel.expose(hideFaceAuth); 49 | function hideFaceAuth() { 50 | $("#FaceAuth").attr("hidden", true); 51 | $("#FaceAuthSuccess").attr("hidden", false); 52 | } 53 | // Hide success and display 54 | eel.expose(hideFaceAuthSuccess); 55 | function hideFaceAuthSuccess() { 56 | $("#FaceAuthSuccess").attr("hidden", true); 57 | $("#HelloGreet").attr("hidden", false); 58 | } 59 | 60 | // Hide Start Page and display blob 61 | eel.expose(hideStart); 62 | function hideStart() { 63 | $("#Start").attr("hidden", true); 64 | 65 | setTimeout(function () { 66 | $("#Oval").addClass("animate__animated animate__zoomIn"); 67 | }, 1000); 68 | setTimeout(function () { 69 | $("#Oval").attr("hidden", false); 70 | }, 1000); 71 | } 72 | }); 73 | -------------------------------------------------------------------------------- /backend/auth/recoganize.py: -------------------------------------------------------------------------------- 1 | from sys import flags 2 | import time 3 | import cv2 4 | import pyautogui as p 5 | 6 | 7 | def AuthenticateFace(): 8 | 9 | flag = "" 10 | # Local Binary Patterns Histograms 11 | recognizer = cv2.face.LBPHFaceRecognizer_create() 12 | 13 | recognizer.read('backend\\auth\\trainer\\trainer.yml') # load trained model 14 | cascadePath = "backend\\auth\\haarcascade_frontalface_default.xml" 15 | # initializing haar cascade for object detection approach 16 | faceCascade = cv2.CascadeClassifier(cascadePath) 17 | 18 | font = cv2.FONT_HERSHEY_SIMPLEX # denotes the font type 19 | 20 | 21 | id = 2 # number of persons you want to Recognize 22 | 23 | 24 | names = ['','', 'Ankit'] # names, leave first empty bcz counter starts from 0 25 | 26 | 27 | cam = cv2.VideoCapture(0, cv2.CAP_DSHOW) # cv2.CAP_DSHOW to remove warning 28 | cam.set(3, 640) # set video FrameWidht 29 | cam.set(4, 480) # set video FrameHeight 30 | 31 | # Define min window size to be recognized as a face 32 | minW = 0.1*cam.get(3) 33 | minH = 0.1*cam.get(4) 34 | 35 | # flag = True 36 | 37 | while True: 38 | 39 | ret, img = cam.read() # read the frames using the above created object 40 | 41 | # The function converts an input image from one color space to another 42 | converted_image = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) 43 | 44 | faces = faceCascade.detectMultiScale( 45 | converted_image, 46 | scaleFactor=1.2, 47 | minNeighbors=5, 48 | minSize=(int(minW), int(minH)), 49 | ) 50 | 51 | for(x, y, w, h) in faces: 52 | 53 | # used to draw a rectangle on any image 54 | cv2.rectangle(img, (x, y), (x+w, y+h), (0, 255, 0), 2) 55 | 56 | # to predict on every single image 57 | id, accuracy = recognizer.predict(converted_image[y:y+h, x:x+w]) 58 | 59 | # Check if accuracy is less them 100 ==> "0" is perfect match 60 | if (accuracy < 100): 61 | id = names[id] 62 | accuracy = " {0}%".format(round(100 - accuracy)) 63 | flag = 1 64 | else: 65 | id = "unknown" 66 | accuracy = " {0}%".format(round(100 - accuracy)) 67 | flag = 0 68 | 69 | cv2.putText(img, str(id), (x+5, y-5), font, 1, (255, 255, 255), 2) 70 | cv2.putText(img, str(accuracy), (x+5, y+h-5), 71 | font, 1, (255, 255, 0), 1) 72 | 73 | cv2.imshow('camera', img) 74 | 75 | k = cv2.waitKey(10) & 0xff # Press 'ESC' for exiting video 76 | if k == 27: 77 | break 78 | if flag == 1: 79 | break 80 | 81 | 82 | # Do a bit of cleanup 83 | 84 | cam.release() 85 | cv2.destroyAllWindows() 86 | return flag 87 | -------------------------------------------------------------------------------- /frontend/main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | 3 | eel.init()() 4 | $(".text").textillate({ 5 | loop: true, 6 | speed: 1500, 7 | sync: true, 8 | in: { 9 | effect: "bounceIn", 10 | }, 11 | out: { 12 | effect: "bounceOut", 13 | }, 14 | }); 15 | 16 | $(".siri-message").textillate({ 17 | loop: true, 18 | sync: true, 19 | in: { 20 | effect: "fadeInUp", 21 | sync: true, 22 | }, 23 | out: { 24 | effect: "fadeOutUp", 25 | sync: true, 26 | }, 27 | }); 28 | 29 | var siriWave = new SiriWave({ 30 | container: document.getElementById("siri-container"), 31 | width: 940, 32 | style: "ios9", 33 | amplitude: "1", 34 | speed: "0.30", 35 | height: 200, 36 | autostart: true, 37 | waveColor: "#ff0000", 38 | waveOffset: 0, 39 | rippleEffect: true, 40 | rippleColor: "#ffffff", 41 | }); 42 | 43 | $("#MicBtn").click(function () { 44 | eel.play_assistant_sound(); 45 | $("#Oval").attr("hidden", true); 46 | $("#SiriWave").attr("hidden", false); 47 | 48 | eel.takeAllCommands()(); 49 | }); 50 | 51 | function doc_keyUp(e) { 52 | // this would test for whichever key is 40 (down arrow) and the ctrl key at the same time 53 | 54 | if (e.key === "j" && e.metaKey) { 55 | eel.play_assistant_sound(); 56 | $("#Oval").attr("hidden", true); 57 | $("#SiriWave").attr("hidden", false); 58 | eel.takeAllCommands()(); 59 | } 60 | } 61 | document.addEventListener("keyup", doc_keyUp, false); 62 | 63 | function PlayAssistant(message) { 64 | if (message != "") { 65 | $("#Oval").attr("hidden", true); 66 | $("#SiriWave").attr("hidden", false); 67 | eel.takeAllCommands(message); 68 | $("#chatbox").val(""); 69 | $("#MicBtn").attr("hidden", false); 70 | $("#SendBtn").attr("hidden", true); 71 | } else { 72 | console.log("Empty message, nothing sent."); // Log if the message is empty 73 | } 74 | } 75 | 76 | function ShowHideButton(message) { 77 | if (message.length == 0) { 78 | $("#MicBtn").attr("hidden", false); 79 | $("#SendBtn").attr("hidden", true); 80 | } else { 81 | $("#MicBtn").attr("hidden", true); 82 | $("#SendBtn").attr("hidden", false); 83 | } 84 | } 85 | 86 | $("#chatbox").keyup(function () { 87 | let message = $("#chatbox").val(); 88 | console.log("Current chatbox input: ", message); // Log input value for debugging 89 | ShowHideButton(message); 90 | }); 91 | 92 | $("#SendBtn").click(function () { 93 | let message = $("#chatbox").val(); 94 | PlayAssistant(message); 95 | }); 96 | 97 | $("#chatbox").keypress(function (e) { 98 | key = e.which; 99 | if (key == 13) { 100 | let message = $("#chatbox").val(); 101 | PlayAssistant(message); 102 | } 103 | }); 104 | }); 105 | -------------------------------------------------------------------------------- /backend/command.py: -------------------------------------------------------------------------------- 1 | import time 2 | import pyttsx3 3 | import speech_recognition as sr 4 | import eel 5 | 6 | def speak(text): 7 | text = str(text) 8 | engine = pyttsx3.init('sapi5') 9 | voices = engine.getProperty('voices') 10 | # Pick a voice safely (fall back to first available) 11 | try: 12 | voice_to_use = voices[2].id if len(voices) > 2 else voices[0].id 13 | except Exception: 14 | voice_to_use = voices[0].id if voices else None 15 | if voice_to_use: 16 | engine.setProperty('voice', voice_to_use) 17 | engine.setProperty('rate', 174) 18 | eel.DisplayMessage(text) 19 | engine.say(text) 20 | engine.runAndWait() 21 | eel.receiverText(text) 22 | 23 | # Expose the Python function to JavaScript 24 | 25 | def takecommand(): 26 | r = sr.Recognizer() 27 | with sr.Microphone() as source: 28 | print("I'm listening...") 29 | eel.DisplayMessage("I'm listening...") 30 | r.pause_threshold = 1 31 | r.adjust_for_ambient_noise(source) 32 | audio = r.listen(source, 10, 8) 33 | 34 | try: 35 | print("Recognizing...") 36 | eel.DisplayMessage("Recognizing...") 37 | query = r.recognize_google(audio, language='en-US') 38 | print(f"User said: {query}\n") 39 | eel.DisplayMessage(query) 40 | 41 | 42 | speak(query) 43 | except Exception as e: 44 | print(f"Error: {str(e)}\n") 45 | return None 46 | 47 | return query.lower() 48 | 49 | 50 | 51 | @eel.expose 52 | def takeAllCommands(message=None): 53 | if message is None: 54 | query = takecommand() # If no message is passed, listen for voice input 55 | if not query: 56 | return # Exit if no query is received 57 | print(query) 58 | eel.senderText(query) 59 | else: 60 | query = message # If there's a message, use it 61 | print(f"Message received: {query}") 62 | eel.senderText(query) 63 | 64 | try: 65 | if query: 66 | if "open" in query: 67 | from backend.feature import openCommand 68 | openCommand(query) 69 | elif "send message" in query or "call" in query or "video call" in query: 70 | from backend.feature import findContact, whatsApp 71 | flag = "" 72 | Phone, name = findContact(query) 73 | if Phone != 0: 74 | if "send message" in query: 75 | flag = 'message' 76 | speak("What message to send?") 77 | query = takecommand() # Ask for the message text 78 | elif "call" in query: 79 | flag = 'call' 80 | else: 81 | flag = 'video call' 82 | whatsApp(Phone, query, flag, name) 83 | elif "on youtube" in query: 84 | from backend.feature import PlayYoutube 85 | PlayYoutube(query) 86 | else: 87 | from backend.feature import chatBot 88 | chatBot(query) 89 | else: 90 | speak("No command was given.") 91 | except Exception as e: 92 | print(f"An error occurred: {e}") 93 | speak("Sorry, something went wrong.") 94 | 95 | eel.ShowHood() 96 | -------------------------------------------------------------------------------- /frontend/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: black; 3 | overflow-y: hidden; 4 | overflow-x: hidden; 5 | } 6 | .square{ 7 | width :400px; 8 | height :400px; 9 | position:relative; 10 | display:flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | .square span:nth-child(1){ 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 100%; 19 | height: 100%; 20 | background-image: radial-gradient(#6b72ff00 50%, #000dff3b 50%); 21 | box-shadow: 0 0 50px rgb(25,25,255),inset 0 0 50px rgb(25,25,255); 22 | border-radius:30% 60% 63% 37%/40% 45% 58% 60%; 23 | transition:0.4s; 24 | cursor: pointer; 25 | animation: animate1 6s infinite linear; 26 | } 27 | .square span:nth-child(2){ 28 | position: absolute; 29 | top: 0; 30 | left: 0; 31 | width: 100%; 32 | height: 100%; 33 | background-image: radial-gradient(#6b72ff00 50%, #000dff3b 50%); 34 | box-shadow: 0 0 50px rgb(25,25,255),inset 0 0 50px rgb(25,25,255); 35 | border-radius:30% 60% 63% 37%/40% 45% 58% 60%; 36 | transition:0.4s; 37 | cursor: pointer; 38 | animation: animate2 4s infinite linear; 39 | } 40 | .square span:nth-child(3){ 41 | position: absolute; 42 | top: 0; 43 | left: 0; 44 | width: 100%; 45 | height: 100%; 46 | background-image: radial-gradient(#6b72ff00 50%, #000dff3b 50%); 47 | box-shadow: 0 0 50px rgb(25,25,255),inset 0 0 50px rgb(25,25,255); 48 | border-radius:30% 60% 63% 37%/40% 45% 58% 60%; 49 | transition:0.4s; 50 | cursor: pointer; 51 | animation: animate3 8s infinite linear; 52 | } 53 | 54 | 55 | @keyframes animate1 { 56 | 0% { 57 | transform: rotate(0deg); 58 | } 59 | 100% { 60 | transform: rotate(360deg); 61 | } 62 | } 63 | 64 | @keyframes animate2 { 65 | 0% { 66 | transform: rotate(90deg); 67 | } 68 | 100% { 69 | transform: rotate(270deg); 70 | } 71 | } 72 | 73 | @keyframes animate3 { 74 | 0% { 75 | transform: rotate(180deg); 76 | } 77 | 100% { 78 | transform: rotate(180deg); 79 | } 80 | } 81 | 82 | 83 | 84 | 85 | #TextInput { 86 | background-color: #181818a8; 87 | border-color: blue; 88 | box-shadow: 0 0 20px rgb(255, 0, 0), 89 | inset 0 0 0px rgb(255, 140, 0); 90 | border-radius: 8px; 91 | color: white; 92 | padding: 3px 0px 3px 20px; 93 | margin: 0px 20%; 94 | } 95 | 96 | .input-field { 97 | background-color: transparent; 98 | border: none; 99 | width: 95%; 100 | outline: none; 101 | color: white; 102 | font-family: cursive; 103 | } 104 | 105 | 106 | .glow-on-hover { 107 | width: 35px; 108 | height: 35px; 109 | border: none; 110 | outline: none; 111 | color: #fff; 112 | background: #111; 113 | cursor: pointer; 114 | position: relative; 115 | z-index: 0; 116 | border-radius: 10px; 117 | padding: 0px; 118 | margin-left: 10px; 119 | } 120 | 121 | .glow-on-hover:before { 122 | content: ''; 123 | background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); 124 | position: absolute; 125 | top: -2px; 126 | left: -2px; 127 | background-size: 400%; 128 | z-index: -1; 129 | filter: blur(5px); 130 | width: calc(100% + 4px); 131 | height: calc(100% + 4px); 132 | animation: glowing 20s linear infinite; 133 | opacity: 0; 134 | transition: opacity .3s ease-in-out; 135 | border-radius: 10px; 136 | } 137 | 138 | .glow-on-hover:active { 139 | color: #181818a8 140 | } 141 | 142 | .glow-on-hover:active:after { 143 | background: transparent; 144 | } 145 | 146 | .glow-on-hover:hover:before { 147 | opacity: 1; 148 | } 149 | 150 | .glow-on-hover:after { 151 | z-index: -1; 152 | content: ''; 153 | position: absolute; 154 | width: 100%; 155 | height: 100%; 156 | background: #111; 157 | left: 0; 158 | top: 0; 159 | border-radius: 10px; 160 | } 161 | 162 | @keyframes glowing { 163 | 0% { 164 | background-position: 0 0; 165 | } 166 | 167 | 50% { 168 | background-position: 400% 0; 169 | } 170 | 171 | 100% { 172 | background-position: 0 0; 173 | } 174 | } 175 | 176 | 177 | .chat-canvas{ 178 | background-color: #191919 179 | } 180 | 181 | .receiver_message{ 182 | padding: 8px; 183 | border: 2px solid cyan; 184 | border-radius: 0px 15px 15px 20px; 185 | width: auto; 186 | color: white; 187 | background-color: #0dcaf014; 188 | } 189 | 190 | .sender_message{ 191 | padding: 8px; 192 | border: 1px solid #0045ff; 193 | border-radius: 15px 15px 0px 20px; 194 | width: auto; 195 | color: white; 196 | background-color: #0045ff; 197 | } 198 | .width-size{ 199 | max-width: 80%; 200 | width: auto; 201 | } 202 | 203 | 204 | 205 | 206 | .svg-frame { 207 | position: relative; 208 | width: 455px; 209 | height: 455px; 210 | transform-style: preserve-3d; 211 | display: flex; 212 | justify-content: center; 213 | align-items: center; 214 | animation: change-view 2s ease-in infinite; 215 | } 216 | 217 | @keyframes change-view { 218 | 219 | 0%, 220 | 50% { 221 | transform: rotate(-0deg) skew(00deg) translateX(calc(0 * var(--i))) translateY(calc(-0px * var(--i))); 222 | } 223 | 224 | 70%, 225 | 100% { 226 | transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i))); 227 | } 228 | } 229 | 230 | svg { 231 | position: absolute; 232 | transition: 0.5s; 233 | transform-origin: center; 234 | width: 450px; 235 | height: 450px; 236 | fill: none; 237 | animation: change-view 5s ease-in-out infinite alternate; 238 | filter: drop-shadow(0 0 12px #00aaff); 239 | } 240 | 241 | #big-centro, 242 | #outter1, 243 | #solo-lines, 244 | #center, 245 | #outter-center, 246 | #bottom-dots, 247 | #center-lines, 248 | #squares, 249 | #top-dots { 250 | transform-origin: center; 251 | animation: rotate 4s ease-in-out infinite alternate; 252 | } 253 | 254 | #big-centro { 255 | animation-delay: -1.5s; 256 | } 257 | 258 | #outter1 { 259 | animation-delay: -1.2s; 260 | } 261 | 262 | #center { 263 | animation-delay: -2.2s; 264 | } 265 | 266 | #bottom-dots, 267 | #top-dots { 268 | animation-duration: 7s; 269 | } 270 | 271 | #center-lines, 272 | #outter-center { 273 | animation-duration: 6s; 274 | animation-delay: -3s; 275 | } 276 | 277 | @keyframes rotate { 278 | to { 279 | transform: rotate(360deg); 280 | } 281 | } 282 | -------------------------------------------------------------------------------- /backend/feature.py: -------------------------------------------------------------------------------- 1 | # import playsound 2 | # import eel 3 | 4 | 5 | # @eel.expose 6 | # def playAssistantSound(): 7 | # music_dir = "frontend\\assets\\audio\\start_sound.mp3" 8 | # playsound(music_dir) 9 | 10 | 11 | from compileall import compile_path 12 | import os 13 | import re 14 | from shlex import quote 15 | import struct 16 | import subprocess 17 | import time 18 | import webbrowser 19 | import eel 20 | from hugchat import hugchat 21 | import pvporcupine 22 | import pyaudio 23 | import pyautogui 24 | import pywhatkit as kit 25 | import pygame 26 | from backend.command import speak 27 | from backend.config import ASSISTANT_NAME 28 | import sqlite3 29 | 30 | from backend.helper import extract_yt_term, remove_words 31 | conn = sqlite3.connect("jarvis.db") 32 | cursor = conn.cursor() 33 | # Initialize pygame mixer 34 | pygame.mixer.init() 35 | 36 | # Define the function to play sound 37 | @eel.expose 38 | def play_assistant_sound(): 39 | # Use a project-relative path so the audio file works across machines 40 | sound_file = os.path.abspath(os.path.join(os.path.dirname(os.path.dirname(__file__)), 41 | 'frontend', 'assets', 'audio', 'start_sound.mp3')) 42 | if os.path.exists(sound_file): 43 | pygame.mixer.music.load(sound_file) 44 | pygame.mixer.music.play() 45 | else: 46 | print(f"play_assistant_sound: file not found: {sound_file}") 47 | 48 | 49 | def openCommand(query): 50 | query = query.replace(ASSISTANT_NAME,"") 51 | query = query.replace("open","") 52 | query.lower() 53 | 54 | app_name = query.strip() 55 | 56 | if app_name != "": 57 | 58 | try: 59 | cursor.execute( 60 | 'SELECT path FROM sys_command WHERE name IN (?)', (app_name,)) 61 | results = cursor.fetchall() 62 | 63 | if len(results) != 0: 64 | speak("Opening "+query) 65 | os.startfile(results[0][0]) 66 | 67 | elif len(results) == 0: 68 | cursor.execute( 69 | 'SELECT url FROM web_command WHERE name IN (?)', (app_name,)) 70 | results = cursor.fetchall() 71 | 72 | if len(results) != 0: 73 | speak("Opening "+query) 74 | webbrowser.open(results[0][0]) 75 | 76 | else: 77 | speak("Opening "+query) 78 | try: 79 | os.system('start '+query) 80 | except: 81 | speak("not found") 82 | except: 83 | speak("some thing went wrong") 84 | 85 | 86 | def PlayYoutube(query): 87 | search_term = extract_yt_term(query) 88 | speak("Playing "+search_term+" on YouTube") 89 | kit.playonyt(search_term) 90 | 91 | 92 | def hotword(): 93 | porcupine=None 94 | paud=None 95 | audio_stream=None 96 | try: 97 | 98 | # pre trained keywords 99 | porcupine=pvporcupine.create(keywords=["jarvis","alexa"]) 100 | paud=pyaudio.PyAudio() 101 | audio_stream=paud.open(rate=porcupine.sample_rate,channels=1,format=pyaudio.paInt16,input=True,frames_per_buffer=porcupine.frame_length) 102 | 103 | # loop for streaming 104 | while True: 105 | keyword=audio_stream.read(porcupine.frame_length) 106 | keyword=struct.unpack_from("h"*porcupine.frame_length,keyword) 107 | 108 | # processing keyword comes from mic 109 | keyword_index=porcupine.process(keyword) 110 | 111 | # checking first keyword detetcted for not 112 | if keyword_index>=0: 113 | print("hotword detected") 114 | 115 | # pressing shorcut key win+j 116 | import pyautogui as autogui 117 | autogui.keyDown("win") 118 | autogui.press("j") 119 | time.sleep(2) 120 | autogui.keyUp("win") 121 | 122 | except: 123 | if porcupine is not None: 124 | porcupine.delete() 125 | if audio_stream is not None: 126 | audio_stream.close() 127 | if paud is not None: 128 | paud.terminate() 129 | 130 | 131 | def findContact(query): 132 | 133 | words_to_remove = [ASSISTANT_NAME, 'make', 'a', 'to', 'phone', 'call', 'send', 'message', 'wahtsapp', 'video'] 134 | query = remove_words(query, words_to_remove) 135 | 136 | try: 137 | query = query.strip().lower() 138 | cursor.execute("SELECT Phone FROM contacts WHERE LOWER(name) LIKE ? OR LOWER(name) LIKE ?", ('%' + query + '%', query + '%')) 139 | results = cursor.fetchall() 140 | print(results[0][0]) 141 | mobile_number_str = str(results[0][0]) 142 | 143 | if not mobile_number_str.startswith('+91'): 144 | mobile_number_str = '+91' + mobile_number_str 145 | 146 | return mobile_number_str, query 147 | except: 148 | speak('not exist in contacts') 149 | return 0, 0 150 | 151 | 152 | def whatsApp(Phone, message, flag, name): 153 | 154 | 155 | if flag == 'message': 156 | target_tab = 12 157 | jarvis_message = "message send successfully to "+name 158 | 159 | elif flag == 'call': 160 | target_tab = 7 161 | message = '' 162 | jarvis_message = "calling to "+name 163 | 164 | else: 165 | target_tab = 6 166 | message = '' 167 | jarvis_message = "staring video call with "+name 168 | 169 | 170 | # Encode the message for URL 171 | encoded_message = quote(message) 172 | print(encoded_message) 173 | # Construct the URL 174 | whatsapp_url = f"whatsapp://send?phone={Phone}&text={encoded_message}" 175 | 176 | # Construct the full command 177 | full_command = f'start "" "{whatsapp_url}"' 178 | 179 | # Open WhatsApp with the constructed URL using cmd.exe 180 | subprocess.run(full_command, shell=True) 181 | time.sleep(5) 182 | subprocess.run(full_command, shell=True) 183 | 184 | pyautogui.hotkey('ctrl', 'f') 185 | 186 | for i in range(1, target_tab): 187 | pyautogui.hotkey('tab') 188 | 189 | pyautogui.hotkey('enter') 190 | speak(jarvis_message) 191 | 192 | 193 | def chatBot(query): 194 | user_input = query.lower() 195 | chatbot = hugchat.ChatBot(cookie_path="backend\cookie.json") 196 | id = chatbot.new_conversation() 197 | chatbot.change_conversation(id) 198 | response = chatbot.chat(user_input) 199 | print(response) 200 | speak(response) 201 | return response -------------------------------------------------------------------------------- /frontend/script.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load", windowLoadHandler, false); 2 | var sphereRad = 140; 3 | var radius_sp = 1; 4 | //for debug messages 5 | var Debugger = function () { }; 6 | Debugger.log = function (message) { 7 | try { 8 | console.log(message); 9 | } 10 | catch (exception) { 11 | return; 12 | } 13 | } 14 | 15 | function windowLoadHandler() { 16 | canvasApp(); 17 | } 18 | 19 | function canvasSupport() { 20 | return Modernizr.canvas; 21 | } 22 | 23 | function canvasApp() { 24 | if (!canvasSupport()) { 25 | return; 26 | } 27 | 28 | var theCanvas = document.getElementById("canvasOne"); 29 | var context = theCanvas.getContext("2d"); 30 | 31 | var displayWidth; 32 | var displayHeight; 33 | var timer; 34 | var wait; 35 | var count; 36 | var numToAddEachFrame; 37 | var particleList; 38 | var recycleBin; 39 | var particleAlpha; 40 | var r, g, b; 41 | var fLen; 42 | var m; 43 | var projCenterX; 44 | var projCenterY; 45 | var zMax; 46 | var turnAngle; 47 | var turnSpeed; 48 | var sphereCenterX, sphereCenterY, sphereCenterZ; 49 | var particleRad; 50 | var zeroAlphaDepth; 51 | var randAccelX, randAccelY, randAccelZ; 52 | var gravity; 53 | var rgbString; 54 | var p; 55 | var outsideTest; 56 | var nextParticle; 57 | var sinAngle; 58 | var cosAngle; 59 | var rotX, rotZ; 60 | var depthAlphaFactor; 61 | var i; 62 | var theta, phi; 63 | var x0, y0, z0; 64 | 65 | init(); 66 | 67 | // eel.expose(init) 68 | function init() { 69 | wait = 1; 70 | count = wait - 1; 71 | numToAddEachFrame = 8; 72 | 73 | //particle color 74 | r = 0; 75 | g = 72; 76 | b = 255; 77 | 78 | rgbString = "rgba(" + r + "," + g + "," + b + ","; //partial string for color which will be completed by appending alpha value. 79 | particleAlpha = 1; //maximum alpha 80 | 81 | displayWidth = theCanvas.width; 82 | displayHeight = theCanvas.height; 83 | 84 | fLen = 320; //represents the distance from the viewer to z=0 depth. 85 | 86 | //projection center coordinates sets location of origin 87 | projCenterX = displayWidth / 2; 88 | projCenterY = displayHeight / 2; 89 | 90 | //we will not draw coordinates if they have too large of a z-coordinate (which means they are very close to the observer). 91 | zMax = fLen - 2; 92 | 93 | particleList = {}; 94 | recycleBin = {}; 95 | 96 | //random acceleration factors - causes some random motion 97 | randAccelX = 0.1; 98 | randAccelY = 0.1; 99 | randAccelZ = 0.1; 100 | 101 | gravity = -0; //try changing to a positive number (not too large, for example 0.3), or negative for floating upwards. 102 | 103 | particleRad = 1.8; 104 | 105 | sphereCenterX = 0; 106 | sphereCenterY = 0; 107 | sphereCenterZ = -3 - sphereRad; 108 | 109 | //alpha values will lessen as particles move further back, causing depth-based darkening: 110 | zeroAlphaDepth = -750; 111 | 112 | turnSpeed = 2 * Math.PI / 1200; //the sphere will rotate at this speed (one complete rotation every 1600 frames). 113 | turnAngle = 0; //initial angle 114 | 115 | timer = setInterval(onTimer, 10 / 24); 116 | } 117 | 118 | function onTimer() { 119 | //if enough time has elapsed, we will add new particles. 120 | count++; 121 | if (count >= wait) { 122 | 123 | count = 0; 124 | for (i = 0; i < numToAddEachFrame; i++) { 125 | theta = Math.random() * 2 * Math.PI; 126 | phi = Math.acos(Math.random() * 2 - 1); 127 | x0 = sphereRad * Math.sin(phi) * Math.cos(theta); 128 | y0 = sphereRad * Math.sin(phi) * Math.sin(theta); 129 | z0 = sphereRad * Math.cos(phi); 130 | 131 | //We use the addParticle function to add a new particle. The parameters set the position and velocity components. 132 | //Note that the velocity parameters will cause the particle to initially fly outwards away from the sphere center (after 133 | //it becomes unstuck). 134 | var p = addParticle(x0, sphereCenterY + y0, sphereCenterZ + z0, 0.002 * x0, 0.002 * y0, 0.002 * z0); 135 | 136 | //we set some "envelope" parameters which will control the evolving alpha of the particles. 137 | p.attack = 50; 138 | p.hold = 50; 139 | p.decay = 100; 140 | p.initValue = 0; 141 | p.holdValue = particleAlpha; 142 | p.lastValue = 0; 143 | 144 | //the particle will be stuck in one place until this time has elapsed: 145 | p.stuckTime = 90 + Math.random() * 20; 146 | 147 | p.accelX = 0; 148 | p.accelY = gravity; 149 | p.accelZ = 0; 150 | } 151 | } 152 | 153 | //update viewing angle 154 | turnAngle = (turnAngle + turnSpeed) % (2 * Math.PI); 155 | sinAngle = Math.sin(turnAngle); 156 | cosAngle = Math.cos(turnAngle); 157 | 158 | //background fill 159 | context.fillStyle = "#000000"; 160 | context.fillRect(0, 0, displayWidth, displayHeight); 161 | 162 | //update and draw particles 163 | p = particleList.first; 164 | while (p != null) { 165 | //before list is altered record next particle 166 | nextParticle = p.next; 167 | 168 | //update age 169 | p.age++; 170 | 171 | //if the particle is past its "stuck" time, it will begin to move. 172 | if (p.age > p.stuckTime) { 173 | p.velX += p.accelX + randAccelX * (Math.random() * 2 - 1); 174 | p.velY += p.accelY + randAccelY * (Math.random() * 2 - 1); 175 | p.velZ += p.accelZ + randAccelZ * (Math.random() * 2 - 1); 176 | 177 | p.x += p.velX; 178 | p.y += p.velY; 179 | p.z += p.velZ; 180 | } 181 | 182 | /* 183 | We are doing two things here to calculate display coordinates. 184 | The whole display is being rotated around a vertical axis, so we first calculate rotated coordinates for 185 | x and z (but the y coordinate will not change). 186 | Then, we take the new coordinates (rotX, y, rotZ), and project these onto the 2D view plane. 187 | */ 188 | rotX = cosAngle * p.x + sinAngle * (p.z - sphereCenterZ); 189 | rotZ = -sinAngle * p.x + cosAngle * (p.z - sphereCenterZ) + sphereCenterZ; 190 | m = radius_sp * fLen / (fLen - rotZ); 191 | p.projX = rotX * m + projCenterX; 192 | p.projY = p.y * m + projCenterY; 193 | 194 | //update alpha according to envelope parameters. 195 | if (p.age < p.attack + p.hold + p.decay) { 196 | if (p.age < p.attack) { 197 | p.alpha = (p.holdValue - p.initValue) / p.attack * p.age + p.initValue; 198 | } 199 | else if (p.age < p.attack + p.hold) { 200 | p.alpha = p.holdValue; 201 | } 202 | else if (p.age < p.attack + p.hold + p.decay) { 203 | p.alpha = (p.lastValue - p.holdValue) / p.decay * (p.age - p.attack - p.hold) + p.holdValue; 204 | } 205 | } 206 | else { 207 | p.dead = true; 208 | } 209 | 210 | //see if the particle is still within the viewable range. 211 | if ((p.projX > displayWidth) || (p.projX < 0) || (p.projY < 0) || (p.projY > displayHeight) || (rotZ > zMax)) { 212 | outsideTest = true; 213 | } 214 | else { 215 | outsideTest = false; 216 | } 217 | 218 | if (outsideTest || p.dead) { 219 | recycle(p); 220 | } 221 | 222 | else { 223 | //depth-dependent darkening 224 | depthAlphaFactor = (1 - rotZ / zeroAlphaDepth); 225 | depthAlphaFactor = (depthAlphaFactor > 1) ? 1 : ((depthAlphaFactor < 0) ? 0 : depthAlphaFactor); 226 | context.fillStyle = rgbString + depthAlphaFactor * p.alpha + ")"; 227 | 228 | //draw 229 | context.beginPath(); 230 | context.arc(p.projX, p.projY, m * particleRad, 0, 2 * Math.PI, false); 231 | context.closePath(); 232 | context.fill(); 233 | } 234 | 235 | p = nextParticle; 236 | } 237 | } 238 | 239 | function addParticle(x0, y0, z0, vx0, vy0, vz0) { 240 | var newParticle; 241 | var color; 242 | 243 | //check recycle bin for available drop: 244 | if (recycleBin.first != null) { 245 | newParticle = recycleBin.first; 246 | //remove from bin 247 | if (newParticle.next != null) { 248 | recycleBin.first = newParticle.next; 249 | newParticle.next.prev = null; 250 | } 251 | else { 252 | recycleBin.first = null; 253 | } 254 | } 255 | //if the recycle bin is empty, create a new particle (a new ampty object): 256 | else { 257 | newParticle = {}; 258 | } 259 | 260 | //add to beginning of particle list 261 | if (particleList.first == null) { 262 | particleList.first = newParticle; 263 | newParticle.prev = null; 264 | newParticle.next = null; 265 | } 266 | else { 267 | newParticle.next = particleList.first; 268 | particleList.first.prev = newParticle; 269 | particleList.first = newParticle; 270 | newParticle.prev = null; 271 | } 272 | 273 | //initialize 274 | newParticle.x = x0; 275 | newParticle.y = y0; 276 | newParticle.z = z0; 277 | newParticle.velX = vx0; 278 | newParticle.velY = vy0; 279 | newParticle.velZ = vz0; 280 | newParticle.age = 0; 281 | newParticle.dead = false; 282 | if (Math.random() < 0.5) { 283 | newParticle.right = true; 284 | } 285 | else { 286 | newParticle.right = false; 287 | } 288 | return newParticle; 289 | } 290 | 291 | function recycle(p) { 292 | //remove from particleList 293 | if (particleList.first == p) { 294 | if (p.next != null) { 295 | p.next.prev = null; 296 | particleList.first = p.next; 297 | } 298 | else { 299 | particleList.first = null; 300 | } 301 | } 302 | else { 303 | if (p.next == null) { 304 | p.prev.next = null; 305 | } 306 | else { 307 | p.prev.next = p.next; 308 | p.next.prev = p.prev; 309 | } 310 | } 311 | //add to recycle bin 312 | if (recycleBin.first == null) { 313 | recycleBin.first = p; 314 | p.prev = null; 315 | p.next = null; 316 | } 317 | else { 318 | p.next = recycleBin.first; 319 | recycleBin.first.prev = p; 320 | recycleBin.first = p; 321 | p.prev = null; 322 | } 323 | } 324 | } 325 | 326 | 327 | $(function () { 328 | $("#slider-range").slider({ 329 | range: false, 330 | min: 20, 331 | max: 500, 332 | value: 280, 333 | slide: function (event, ui) { 334 | console.log(ui.value); 335 | sphereRad = ui.value; 336 | } 337 | }); 338 | }); 339 | 340 | $(function () { 341 | $("#slider-test").slider({ 342 | range: false, 343 | min: 1.0, 344 | max: 2.0, 345 | value: 1, 346 | step: 0.01, 347 | slide: function (event, ui) { 348 | radius_sp = ui.value; 349 | } 350 | }); 351 | }); -------------------------------------------------------------------------------- /frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Jarvis 7 | 12 | 13 | 14 | 20 | 21 | 25 | 26 | 27 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 |
39 |
40 |
41 |
45 |
46 |
47 | 48 | 49 | 50 | 51 | 59 | 60 | 61 | 69 | 78 | 79 | 80 | 89 | 97 | 105 | 106 | 107 | 108 | 111 | 112 | 118 | 119 | 120 | 121 | 124 | 125 | 132 | 133 | 134 | 141 | 142 | 145 | 146 | 152 | 153 | 154 | 155 | 156 | 157 | 164 | 165 | 166 | 169 | 170 | 176 | 177 | 178 | 179 | 182 | 183 | 189 | 190 | 191 | 192 | 195 | 196 | 202 | 203 | 204 | 205 | 208 | 209 | 215 | 216 | 217 | 218 | 221 | 222 | 229 | 230 | 231 | 232 | 235 | 236 | 243 | 244 | 245 | 246 | 249 | 250 | 257 | 258 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 276 | 277 | 283 | 284 | 285 | 286 | 289 | 290 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 308 | 309 | 315 | 316 | 317 | 318 | 321 | 322 | 329 | 330 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 348 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 368 | 375 | 376 | 377 |
378 | 388 | 398 | 408 |
409 |
410 |
411 |

415 | Initializing... 416 |

417 |
418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 |
429 | 435 |
436 |
437 | 438 | 439 | 440 |
441 |
442 |
443 |

Ask me Anything

444 | 445 |
446 |
447 |
448 | 455 | 458 | 461 | 464 |
465 |
466 |
467 |
468 |
469 |
470 |
471 | 472 |
473 |
474 |
475 |
476 |
480 |
481 |

482 | Hello, I am Your Assistant 483 |

484 |
485 |
486 |
487 |
488 |
489 |
490 |
491 |
492 | 493 | 494 | 495 | 496 | 497 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | -------------------------------------------------------------------------------- /frontend/assets/vendore/texllate/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* 3 | Animate.css - http://daneden.me/animate 4 | Licensed under the ☺ license (http://licence.visualidiot.com/) 5 | 6 | Copyright (c) 2012 Dan Eden 7 | 8 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 11 | 12 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 13 | */ 14 | body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 15 | -webkit-backface-visibility: hidden; 16 | } 17 | .animated { 18 | -webkit-animation-duration: 1s; 19 | -moz-animation-duration: 1s; 20 | -o-animation-duration: 1s; 21 | animation-duration: 1s; 22 | -webkit-animation-fill-mode: both; 23 | -moz-animation-fill-mode: both; 24 | -o-animation-fill-mode: both; 25 | animation-fill-mode: both; 26 | } 27 | 28 | .animated.hinge { 29 | -webkit-animation-duration: 2s; 30 | -moz-animation-duration: 2s; 31 | -o-animation-duration: 2s; 32 | animation-duration: 2s; 33 | } 34 | 35 | @-webkit-keyframes flash { 36 | 0%, 50%, 100% {opacity: 1;} 37 | 25%, 75% {opacity: 0;} 38 | } 39 | 40 | @-moz-keyframes flash { 41 | 0%, 50%, 100% {opacity: 1;} 42 | 25%, 75% {opacity: 0;} 43 | } 44 | 45 | @-o-keyframes flash { 46 | 0%, 50%, 100% {opacity: 1;} 47 | 25%, 75% {opacity: 0;} 48 | } 49 | 50 | @keyframes flash { 51 | 0%, 50%, 100% {opacity: 1;} 52 | 25%, 75% {opacity: 0;} 53 | } 54 | 55 | .flash { 56 | -webkit-animation-name: flash; 57 | -moz-animation-name: flash; 58 | -o-animation-name: flash; 59 | animation-name: flash; 60 | } 61 | @-webkit-keyframes shake { 62 | 0%, 100% {-webkit-transform: translateX(0);} 63 | 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 64 | 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} 65 | } 66 | 67 | @-moz-keyframes shake { 68 | 0%, 100% {-moz-transform: translateX(0);} 69 | 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} 70 | 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} 71 | } 72 | 73 | @-o-keyframes shake { 74 | 0%, 100% {-o-transform: translateX(0);} 75 | 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);} 76 | 20%, 40%, 60%, 80% {-o-transform: translateX(10px);} 77 | } 78 | 79 | @keyframes shake { 80 | 0%, 100% {transform: translateX(0);} 81 | 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 82 | 20%, 40%, 60%, 80% {transform: translateX(10px);} 83 | } 84 | 85 | .shake { 86 | -webkit-animation-name: shake; 87 | -moz-animation-name: shake; 88 | -o-animation-name: shake; 89 | animation-name: shake; 90 | } 91 | @-webkit-keyframes bounce { 92 | 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 93 | 40% {-webkit-transform: translateY(-30px);} 94 | 60% {-webkit-transform: translateY(-15px);} 95 | } 96 | 97 | @-moz-keyframes bounce { 98 | 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} 99 | 40% {-moz-transform: translateY(-30px);} 100 | 60% {-moz-transform: translateY(-15px);} 101 | } 102 | 103 | @-o-keyframes bounce { 104 | 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);} 105 | 40% {-o-transform: translateY(-30px);} 106 | 60% {-o-transform: translateY(-15px);} 107 | } 108 | @keyframes bounce { 109 | 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 110 | 40% {transform: translateY(-30px);} 111 | 60% {transform: translateY(-15px);} 112 | } 113 | 114 | .bounce { 115 | -webkit-animation-name: bounce; 116 | -moz-animation-name: bounce; 117 | -o-animation-name: bounce; 118 | animation-name: bounce; 119 | } 120 | @-webkit-keyframes tada { 121 | 0% {-webkit-transform: scale(1);} 122 | 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 123 | 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 124 | 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} 125 | 100% {-webkit-transform: scale(1) rotate(0);} 126 | } 127 | 128 | @-moz-keyframes tada { 129 | 0% {-moz-transform: scale(1);} 130 | 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);} 131 | 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);} 132 | 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);} 133 | 100% {-moz-transform: scale(1) rotate(0);} 134 | } 135 | 136 | @-o-keyframes tada { 137 | 0% {-o-transform: scale(1);} 138 | 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);} 139 | 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);} 140 | 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);} 141 | 100% {-o-transform: scale(1) rotate(0);} 142 | } 143 | 144 | @keyframes tada { 145 | 0% {transform: scale(1);} 146 | 10%, 20% {transform: scale(0.9) rotate(-3deg);} 147 | 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 148 | 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 149 | 100% {transform: scale(1) rotate(0);} 150 | } 151 | 152 | .tada { 153 | -webkit-animation-name: tada; 154 | -moz-animation-name: tada; 155 | -o-animation-name: tada; 156 | animation-name: tada; 157 | } 158 | @-webkit-keyframes swing { 159 | 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 160 | 20% { -webkit-transform: rotate(15deg); } 161 | 40% { -webkit-transform: rotate(-10deg); } 162 | 60% { -webkit-transform: rotate(5deg); } 163 | 80% { -webkit-transform: rotate(-5deg); } 164 | 100% { -webkit-transform: rotate(0deg); } 165 | } 166 | 167 | @-moz-keyframes swing { 168 | 20% { -moz-transform: rotate(15deg); } 169 | 40% { -moz-transform: rotate(-10deg); } 170 | 60% { -moz-transform: rotate(5deg); } 171 | 80% { -moz-transform: rotate(-5deg); } 172 | 100% { -moz-transform: rotate(0deg); } 173 | } 174 | 175 | @-o-keyframes swing { 176 | 20% { -o-transform: rotate(15deg); } 177 | 40% { -o-transform: rotate(-10deg); } 178 | 60% { -o-transform: rotate(5deg); } 179 | 80% { -o-transform: rotate(-5deg); } 180 | 100% { -o-transform: rotate(0deg); } 181 | } 182 | 183 | @keyframes swing { 184 | 20% { transform: rotate(15deg); } 185 | 40% { transform: rotate(-10deg); } 186 | 60% { transform: rotate(5deg); } 187 | 80% { transform: rotate(-5deg); } 188 | 100% { transform: rotate(0deg); } 189 | } 190 | 191 | .swing { 192 | -webkit-transform-origin: top center; 193 | -moz-transform-origin: top center; 194 | -o-transform-origin: top center; 195 | transform-origin: top center; 196 | -webkit-animation-name: swing; 197 | -moz-animation-name: swing; 198 | -o-animation-name: swing; 199 | animation-name: swing; 200 | } 201 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 202 | 203 | @-webkit-keyframes wobble { 204 | 0% { -webkit-transform: translateX(0%); } 205 | 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 206 | 30% { -webkit-transform: translateX(20%) rotate(3deg); } 207 | 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 208 | 60% { -webkit-transform: translateX(10%) rotate(2deg); } 209 | 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 210 | 100% { -webkit-transform: translateX(0%); } 211 | } 212 | 213 | @-moz-keyframes wobble { 214 | 0% { -moz-transform: translateX(0%); } 215 | 15% { -moz-transform: translateX(-25%) rotate(-5deg); } 216 | 30% { -moz-transform: translateX(20%) rotate(3deg); } 217 | 45% { -moz-transform: translateX(-15%) rotate(-3deg); } 218 | 60% { -moz-transform: translateX(10%) rotate(2deg); } 219 | 75% { -moz-transform: translateX(-5%) rotate(-1deg); } 220 | 100% { -moz-transform: translateX(0%); } 221 | } 222 | 223 | @-o-keyframes wobble { 224 | 0% { -o-transform: translateX(0%); } 225 | 15% { -o-transform: translateX(-25%) rotate(-5deg); } 226 | 30% { -o-transform: translateX(20%) rotate(3deg); } 227 | 45% { -o-transform: translateX(-15%) rotate(-3deg); } 228 | 60% { -o-transform: translateX(10%) rotate(2deg); } 229 | 75% { -o-transform: translateX(-5%) rotate(-1deg); } 230 | 100% { -o-transform: translateX(0%); } 231 | } 232 | 233 | @keyframes wobble { 234 | 0% { transform: translateX(0%); } 235 | 15% { transform: translateX(-25%) rotate(-5deg); } 236 | 30% { transform: translateX(20%) rotate(3deg); } 237 | 45% { transform: translateX(-15%) rotate(-3deg); } 238 | 60% { transform: translateX(10%) rotate(2deg); } 239 | 75% { transform: translateX(-5%) rotate(-1deg); } 240 | 100% { transform: translateX(0%); } 241 | } 242 | 243 | .wobble { 244 | -webkit-animation-name: wobble; 245 | -moz-animation-name: wobble; 246 | -o-animation-name: wobble; 247 | animation-name: wobble; 248 | } 249 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 250 | 251 | @-webkit-keyframes pulse { 252 | 0% { -webkit-transform: scale(1); } 253 | 50% { -webkit-transform: scale(1.1); } 254 | 100% { -webkit-transform: scale(1); } 255 | } 256 | @-moz-keyframes pulse { 257 | 0% { -moz-transform: scale(1); } 258 | 50% { -moz-transform: scale(1.1); } 259 | 100% { -moz-transform: scale(1); } 260 | } 261 | @-o-keyframes pulse { 262 | 0% { -o-transform: scale(1); } 263 | 50% { -o-transform: scale(1.1); } 264 | 100% { -o-transform: scale(1); } 265 | } 266 | @keyframes pulse { 267 | 0% { transform: scale(1); } 268 | 50% { transform: scale(1.1); } 269 | 100% { transform: scale(1); } 270 | } 271 | 272 | .pulse { 273 | -webkit-animation-name: pulse; 274 | -moz-animation-name: pulse; 275 | -o-animation-name: pulse; 276 | animation-name: pulse; 277 | } 278 | @-webkit-keyframes flip { 279 | 0% { 280 | -webkit-transform: perspective(400px) rotateY(0); 281 | -webkit-animation-timing-function: ease-out; 282 | } 283 | 40% { 284 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); 285 | -webkit-animation-timing-function: ease-out; 286 | } 287 | 50% { 288 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 289 | -webkit-animation-timing-function: ease-in; 290 | } 291 | 80% { 292 | -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); 293 | -webkit-animation-timing-function: ease-in; 294 | } 295 | 100% { 296 | -webkit-transform: perspective(400px) scale(1); 297 | -webkit-animation-timing-function: ease-in; 298 | } 299 | } 300 | @-moz-keyframes flip { 301 | 0% { 302 | -moz-transform: perspective(400px) rotateY(0); 303 | -moz-animation-timing-function: ease-out; 304 | } 305 | 40% { 306 | -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); 307 | -moz-animation-timing-function: ease-out; 308 | } 309 | 50% { 310 | -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 311 | -moz-animation-timing-function: ease-in; 312 | } 313 | 80% { 314 | -moz-transform: perspective(400px) rotateY(360deg) scale(.95); 315 | -moz-animation-timing-function: ease-in; 316 | } 317 | 100% { 318 | -moz-transform: perspective(400px) scale(1); 319 | -moz-animation-timing-function: ease-in; 320 | } 321 | } 322 | @-o-keyframes flip { 323 | 0% { 324 | -o-transform: perspective(400px) rotateY(0); 325 | -o-animation-timing-function: ease-out; 326 | } 327 | 40% { 328 | -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); 329 | -o-animation-timing-function: ease-out; 330 | } 331 | 50% { 332 | -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 333 | -o-animation-timing-function: ease-in; 334 | } 335 | 80% { 336 | -o-transform: perspective(400px) rotateY(360deg) scale(.95); 337 | -o-animation-timing-function: ease-in; 338 | } 339 | 100% { 340 | -o-transform: perspective(400px) scale(1); 341 | -o-animation-timing-function: ease-in; 342 | } 343 | } 344 | @keyframes flip { 345 | 0% { 346 | transform: perspective(400px) rotateY(0); 347 | animation-timing-function: ease-out; 348 | } 349 | 40% { 350 | transform: perspective(400px) translateZ(150px) rotateY(170deg); 351 | animation-timing-function: ease-out; 352 | } 353 | 50% { 354 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 355 | animation-timing-function: ease-in; 356 | } 357 | 80% { 358 | transform: perspective(400px) rotateY(360deg) scale(.95); 359 | animation-timing-function: ease-in; 360 | } 361 | 100% { 362 | transform: perspective(400px) scale(1); 363 | animation-timing-function: ease-in; 364 | } 365 | } 366 | 367 | .flip { 368 | -webkit-backface-visibility: visible !important; 369 | -webkit-animation-name: flip; 370 | -moz-backface-visibility: visible !important; 371 | -moz-animation-name: flip; 372 | -o-backface-visibility: visible !important; 373 | -o-animation-name: flip; 374 | backface-visibility: visible !important; 375 | animation-name: flip; 376 | } 377 | @-webkit-keyframes flipInX { 378 | 0% { 379 | -webkit-transform: perspective(400px) rotateX(90deg); 380 | opacity: 0; 381 | } 382 | 383 | 40% { 384 | -webkit-transform: perspective(400px) rotateX(-10deg); 385 | } 386 | 387 | 70% { 388 | -webkit-transform: perspective(400px) rotateX(10deg); 389 | } 390 | 391 | 100% { 392 | -webkit-transform: perspective(400px) rotateX(0deg); 393 | opacity: 1; 394 | } 395 | } 396 | @-moz-keyframes flipInX { 397 | 0% { 398 | -moz-transform: perspective(400px) rotateX(90deg); 399 | opacity: 0; 400 | } 401 | 402 | 40% { 403 | -moz-transform: perspective(400px) rotateX(-10deg); 404 | } 405 | 406 | 70% { 407 | -moz-transform: perspective(400px) rotateX(10deg); 408 | } 409 | 410 | 100% { 411 | -moz-transform: perspective(400px) rotateX(0deg); 412 | opacity: 1; 413 | } 414 | } 415 | @-o-keyframes flipInX { 416 | 0% { 417 | -o-transform: perspective(400px) rotateX(90deg); 418 | opacity: 0; 419 | } 420 | 421 | 40% { 422 | -o-transform: perspective(400px) rotateX(-10deg); 423 | } 424 | 425 | 70% { 426 | -o-transform: perspective(400px) rotateX(10deg); 427 | } 428 | 429 | 100% { 430 | -o-transform: perspective(400px) rotateX(0deg); 431 | opacity: 1; 432 | } 433 | } 434 | @keyframes flipInX { 435 | 0% { 436 | transform: perspective(400px) rotateX(90deg); 437 | opacity: 0; 438 | } 439 | 440 | 40% { 441 | transform: perspective(400px) rotateX(-10deg); 442 | } 443 | 444 | 70% { 445 | transform: perspective(400px) rotateX(10deg); 446 | } 447 | 448 | 100% { 449 | transform: perspective(400px) rotateX(0deg); 450 | opacity: 1; 451 | } 452 | } 453 | 454 | .flipInX { 455 | -webkit-backface-visibility: visible !important; 456 | -webkit-animation-name: flipInX; 457 | -moz-backface-visibility: visible !important; 458 | -moz-animation-name: flipInX; 459 | -o-backface-visibility: visible !important; 460 | -o-animation-name: flipInX; 461 | backface-visibility: visible !important; 462 | animation-name: flipInX; 463 | } 464 | @-webkit-keyframes flipOutX { 465 | 0% { 466 | -webkit-transform: perspective(400px) rotateX(0deg); 467 | opacity: 1; 468 | } 469 | 100% { 470 | -webkit-transform: perspective(400px) rotateX(90deg); 471 | opacity: 0; 472 | } 473 | } 474 | 475 | @-moz-keyframes flipOutX { 476 | 0% { 477 | -moz-transform: perspective(400px) rotateX(0deg); 478 | opacity: 1; 479 | } 480 | 100% { 481 | -moz-transform: perspective(400px) rotateX(90deg); 482 | opacity: 0; 483 | } 484 | } 485 | 486 | @-o-keyframes flipOutX { 487 | 0% { 488 | -o-transform: perspective(400px) rotateX(0deg); 489 | opacity: 1; 490 | } 491 | 100% { 492 | -o-transform: perspective(400px) rotateX(90deg); 493 | opacity: 0; 494 | } 495 | } 496 | 497 | @keyframes flipOutX { 498 | 0% { 499 | transform: perspective(400px) rotateX(0deg); 500 | opacity: 1; 501 | } 502 | 100% { 503 | transform: perspective(400px) rotateX(90deg); 504 | opacity: 0; 505 | } 506 | } 507 | 508 | .flipOutX { 509 | -webkit-animation-name: flipOutX; 510 | -webkit-backface-visibility: visible !important; 511 | -moz-animation-name: flipOutX; 512 | -moz-backface-visibility: visible !important; 513 | -o-animation-name: flipOutX; 514 | -o-backface-visibility: visible !important; 515 | animation-name: flipOutX; 516 | backface-visibility: visible !important; 517 | } 518 | @-webkit-keyframes flipInY { 519 | 0% { 520 | -webkit-transform: perspective(400px) rotateY(90deg); 521 | opacity: 0; 522 | } 523 | 524 | 40% { 525 | -webkit-transform: perspective(400px) rotateY(-10deg); 526 | } 527 | 528 | 70% { 529 | -webkit-transform: perspective(400px) rotateY(10deg); 530 | } 531 | 532 | 100% { 533 | -webkit-transform: perspective(400px) rotateY(0deg); 534 | opacity: 1; 535 | } 536 | } 537 | @-moz-keyframes flipInY { 538 | 0% { 539 | -moz-transform: perspective(400px) rotateY(90deg); 540 | opacity: 0; 541 | } 542 | 543 | 40% { 544 | -moz-transform: perspective(400px) rotateY(-10deg); 545 | } 546 | 547 | 70% { 548 | -moz-transform: perspective(400px) rotateY(10deg); 549 | } 550 | 551 | 100% { 552 | -moz-transform: perspective(400px) rotateY(0deg); 553 | opacity: 1; 554 | } 555 | } 556 | @-o-keyframes flipInY { 557 | 0% { 558 | -o-transform: perspective(400px) rotateY(90deg); 559 | opacity: 0; 560 | } 561 | 562 | 40% { 563 | -o-transform: perspective(400px) rotateY(-10deg); 564 | } 565 | 566 | 70% { 567 | -o-transform: perspective(400px) rotateY(10deg); 568 | } 569 | 570 | 100% { 571 | -o-transform: perspective(400px) rotateY(0deg); 572 | opacity: 1; 573 | } 574 | } 575 | @keyframes flipInY { 576 | 0% { 577 | transform: perspective(400px) rotateY(90deg); 578 | opacity: 0; 579 | } 580 | 581 | 40% { 582 | transform: perspective(400px) rotateY(-10deg); 583 | } 584 | 585 | 70% { 586 | transform: perspective(400px) rotateY(10deg); 587 | } 588 | 589 | 100% { 590 | transform: perspective(400px) rotateY(0deg); 591 | opacity: 1; 592 | } 593 | } 594 | 595 | .flipInY { 596 | -webkit-backface-visibility: visible !important; 597 | -webkit-animation-name: flipInY; 598 | -moz-backface-visibility: visible !important; 599 | -moz-animation-name: flipInY; 600 | -o-backface-visibility: visible !important; 601 | -o-animation-name: flipInY; 602 | backface-visibility: visible !important; 603 | animation-name: flipInY; 604 | } 605 | @-webkit-keyframes flipOutY { 606 | 0% { 607 | -webkit-transform: perspective(400px) rotateY(0deg); 608 | opacity: 1; 609 | } 610 | 100% { 611 | -webkit-transform: perspective(400px) rotateY(90deg); 612 | opacity: 0; 613 | } 614 | } 615 | @-moz-keyframes flipOutY { 616 | 0% { 617 | -moz-transform: perspective(400px) rotateY(0deg); 618 | opacity: 1; 619 | } 620 | 100% { 621 | -moz-transform: perspective(400px) rotateY(90deg); 622 | opacity: 0; 623 | } 624 | } 625 | @-o-keyframes flipOutY { 626 | 0% { 627 | -o-transform: perspective(400px) rotateY(0deg); 628 | opacity: 1; 629 | } 630 | 100% { 631 | -o-transform: perspective(400px) rotateY(90deg); 632 | opacity: 0; 633 | } 634 | } 635 | @keyframes flipOutY { 636 | 0% { 637 | transform: perspective(400px) rotateY(0deg); 638 | opacity: 1; 639 | } 640 | 100% { 641 | transform: perspective(400px) rotateY(90deg); 642 | opacity: 0; 643 | } 644 | } 645 | 646 | .flipOutY { 647 | -webkit-backface-visibility: visible !important; 648 | -webkit-animation-name: flipOutY; 649 | -moz-backface-visibility: visible !important; 650 | -moz-animation-name: flipOutY; 651 | -o-backface-visibility: visible !important; 652 | -o-animation-name: flipOutY; 653 | backface-visibility: visible !important; 654 | animation-name: flipOutY; 655 | } 656 | @-webkit-keyframes fadeIn { 657 | 0% {opacity: 0;} 658 | 100% {opacity: 1;} 659 | } 660 | 661 | @-moz-keyframes fadeIn { 662 | 0% {opacity: 0;} 663 | 100% {opacity: 1;} 664 | } 665 | 666 | @-o-keyframes fadeIn { 667 | 0% {opacity: 0;} 668 | 100% {opacity: 1;} 669 | } 670 | 671 | @keyframes fadeIn { 672 | 0% {opacity: 0;} 673 | 100% {opacity: 1;} 674 | } 675 | 676 | .fadeIn { 677 | -webkit-animation-name: fadeIn; 678 | -moz-animation-name: fadeIn; 679 | -o-animation-name: fadeIn; 680 | animation-name: fadeIn; 681 | } 682 | @-webkit-keyframes fadeInUp { 683 | 0% { 684 | opacity: 0; 685 | -webkit-transform: translateY(20px); 686 | } 687 | 688 | 100% { 689 | opacity: 1; 690 | -webkit-transform: translateY(0); 691 | } 692 | } 693 | 694 | @-moz-keyframes fadeInUp { 695 | 0% { 696 | opacity: 0; 697 | -moz-transform: translateY(20px); 698 | } 699 | 700 | 100% { 701 | opacity: 1; 702 | -moz-transform: translateY(0); 703 | } 704 | } 705 | 706 | @-o-keyframes fadeInUp { 707 | 0% { 708 | opacity: 0; 709 | -o-transform: translateY(20px); 710 | } 711 | 712 | 100% { 713 | opacity: 1; 714 | -o-transform: translateY(0); 715 | } 716 | } 717 | 718 | @keyframes fadeInUp { 719 | 0% { 720 | opacity: 0; 721 | transform: translateY(20px); 722 | } 723 | 724 | 100% { 725 | opacity: 1; 726 | transform: translateY(0); 727 | } 728 | } 729 | 730 | .fadeInUp { 731 | -webkit-animation-name: fadeInUp; 732 | -moz-animation-name: fadeInUp; 733 | -o-animation-name: fadeInUp; 734 | animation-name: fadeInUp; 735 | } 736 | @-webkit-keyframes fadeInDown { 737 | 0% { 738 | opacity: 0; 739 | -webkit-transform: translateY(-20px); 740 | } 741 | 742 | 100% { 743 | opacity: 1; 744 | -webkit-transform: translateY(0); 745 | } 746 | } 747 | 748 | @-moz-keyframes fadeInDown { 749 | 0% { 750 | opacity: 0; 751 | -moz-transform: translateY(-20px); 752 | } 753 | 754 | 100% { 755 | opacity: 1; 756 | -moz-transform: translateY(0); 757 | } 758 | } 759 | 760 | @-o-keyframes fadeInDown { 761 | 0% { 762 | opacity: 0; 763 | -o-transform: translateY(-20px); 764 | } 765 | 766 | 100% { 767 | opacity: 1; 768 | -o-transform: translateY(0); 769 | } 770 | } 771 | 772 | @keyframes fadeInDown { 773 | 0% { 774 | opacity: 0; 775 | transform: translateY(-20px); 776 | } 777 | 778 | 100% { 779 | opacity: 1; 780 | transform: translateY(0); 781 | } 782 | } 783 | 784 | .fadeInDown { 785 | -webkit-animation-name: fadeInDown; 786 | -moz-animation-name: fadeInDown; 787 | -o-animation-name: fadeInDown; 788 | animation-name: fadeInDown; 789 | } 790 | @-webkit-keyframes fadeInLeft { 791 | 0% { 792 | opacity: 0; 793 | -webkit-transform: translateX(-20px); 794 | } 795 | 796 | 100% { 797 | opacity: 1; 798 | -webkit-transform: translateX(0); 799 | } 800 | } 801 | 802 | @-moz-keyframes fadeInLeft { 803 | 0% { 804 | opacity: 0; 805 | -moz-transform: translateX(-20px); 806 | } 807 | 808 | 100% { 809 | opacity: 1; 810 | -moz-transform: translateX(0); 811 | } 812 | } 813 | 814 | @-o-keyframes fadeInLeft { 815 | 0% { 816 | opacity: 0; 817 | -o-transform: translateX(-20px); 818 | } 819 | 820 | 100% { 821 | opacity: 1; 822 | -o-transform: translateX(0); 823 | } 824 | } 825 | 826 | @keyframes fadeInLeft { 827 | 0% { 828 | opacity: 0; 829 | transform: translateX(-20px); 830 | } 831 | 832 | 100% { 833 | opacity: 1; 834 | transform: translateX(0); 835 | } 836 | } 837 | 838 | .fadeInLeft { 839 | -webkit-animation-name: fadeInLeft; 840 | -moz-animation-name: fadeInLeft; 841 | -o-animation-name: fadeInLeft; 842 | animation-name: fadeInLeft; 843 | } 844 | @-webkit-keyframes fadeInRight { 845 | 0% { 846 | opacity: 0; 847 | -webkit-transform: translateX(20px); 848 | } 849 | 850 | 100% { 851 | opacity: 1; 852 | -webkit-transform: translateX(0); 853 | } 854 | } 855 | 856 | @-moz-keyframes fadeInRight { 857 | 0% { 858 | opacity: 0; 859 | -moz-transform: translateX(20px); 860 | } 861 | 862 | 100% { 863 | opacity: 1; 864 | -moz-transform: translateX(0); 865 | } 866 | } 867 | 868 | @-o-keyframes fadeInRight { 869 | 0% { 870 | opacity: 0; 871 | -o-transform: translateX(20px); 872 | } 873 | 874 | 100% { 875 | opacity: 1; 876 | -o-transform: translateX(0); 877 | } 878 | } 879 | 880 | @keyframes fadeInRight { 881 | 0% { 882 | opacity: 0; 883 | transform: translateX(20px); 884 | } 885 | 886 | 100% { 887 | opacity: 1; 888 | transform: translateX(0); 889 | } 890 | } 891 | 892 | .fadeInRight { 893 | -webkit-animation-name: fadeInRight; 894 | -moz-animation-name: fadeInRight; 895 | -o-animation-name: fadeInRight; 896 | animation-name: fadeInRight; 897 | } 898 | @-webkit-keyframes fadeInUpBig { 899 | 0% { 900 | opacity: 0; 901 | -webkit-transform: translateY(2000px); 902 | } 903 | 904 | 100% { 905 | opacity: 1; 906 | -webkit-transform: translateY(0); 907 | } 908 | } 909 | 910 | @-moz-keyframes fadeInUpBig { 911 | 0% { 912 | opacity: 0; 913 | -moz-transform: translateY(2000px); 914 | } 915 | 916 | 100% { 917 | opacity: 1; 918 | -moz-transform: translateY(0); 919 | } 920 | } 921 | 922 | @-o-keyframes fadeInUpBig { 923 | 0% { 924 | opacity: 0; 925 | -o-transform: translateY(2000px); 926 | } 927 | 928 | 100% { 929 | opacity: 1; 930 | -o-transform: translateY(0); 931 | } 932 | } 933 | 934 | @keyframes fadeInUpBig { 935 | 0% { 936 | opacity: 0; 937 | transform: translateY(2000px); 938 | } 939 | 940 | 100% { 941 | opacity: 1; 942 | transform: translateY(0); 943 | } 944 | } 945 | 946 | .fadeInUpBig { 947 | -webkit-animation-name: fadeInUpBig; 948 | -moz-animation-name: fadeInUpBig; 949 | -o-animation-name: fadeInUpBig; 950 | animation-name: fadeInUpBig; 951 | } 952 | @-webkit-keyframes fadeInDownBig { 953 | 0% { 954 | opacity: 0; 955 | -webkit-transform: translateY(-2000px); 956 | } 957 | 958 | 100% { 959 | opacity: 1; 960 | -webkit-transform: translateY(0); 961 | } 962 | } 963 | 964 | @-moz-keyframes fadeInDownBig { 965 | 0% { 966 | opacity: 0; 967 | -moz-transform: translateY(-2000px); 968 | } 969 | 970 | 100% { 971 | opacity: 1; 972 | -moz-transform: translateY(0); 973 | } 974 | } 975 | 976 | @-o-keyframes fadeInDownBig { 977 | 0% { 978 | opacity: 0; 979 | -o-transform: translateY(-2000px); 980 | } 981 | 982 | 100% { 983 | opacity: 1; 984 | -o-transform: translateY(0); 985 | } 986 | } 987 | 988 | @keyframes fadeInDownBig { 989 | 0% { 990 | opacity: 0; 991 | transform: translateY(-2000px); 992 | } 993 | 994 | 100% { 995 | opacity: 1; 996 | transform: translateY(0); 997 | } 998 | } 999 | 1000 | .fadeInDownBig { 1001 | -webkit-animation-name: fadeInDownBig; 1002 | -moz-animation-name: fadeInDownBig; 1003 | -o-animation-name: fadeInDownBig; 1004 | animation-name: fadeInDownBig; 1005 | } 1006 | @-webkit-keyframes fadeInLeftBig { 1007 | 0% { 1008 | opacity: 0; 1009 | -webkit-transform: translateX(-2000px); 1010 | } 1011 | 1012 | 100% { 1013 | opacity: 1; 1014 | -webkit-transform: translateX(0); 1015 | } 1016 | } 1017 | @-moz-keyframes fadeInLeftBig { 1018 | 0% { 1019 | opacity: 0; 1020 | -moz-transform: translateX(-2000px); 1021 | } 1022 | 1023 | 100% { 1024 | opacity: 1; 1025 | -moz-transform: translateX(0); 1026 | } 1027 | } 1028 | @-o-keyframes fadeInLeftBig { 1029 | 0% { 1030 | opacity: 0; 1031 | -o-transform: translateX(-2000px); 1032 | } 1033 | 1034 | 100% { 1035 | opacity: 1; 1036 | -o-transform: translateX(0); 1037 | } 1038 | } 1039 | @keyframes fadeInLeftBig { 1040 | 0% { 1041 | opacity: 0; 1042 | transform: translateX(-2000px); 1043 | } 1044 | 1045 | 100% { 1046 | opacity: 1; 1047 | transform: translateX(0); 1048 | } 1049 | } 1050 | 1051 | .fadeInLeftBig { 1052 | -webkit-animation-name: fadeInLeftBig; 1053 | -moz-animation-name: fadeInLeftBig; 1054 | -o-animation-name: fadeInLeftBig; 1055 | animation-name: fadeInLeftBig; 1056 | } 1057 | @-webkit-keyframes fadeInRightBig { 1058 | 0% { 1059 | opacity: 0; 1060 | -webkit-transform: translateX(2000px); 1061 | } 1062 | 1063 | 100% { 1064 | opacity: 1; 1065 | -webkit-transform: translateX(0); 1066 | } 1067 | } 1068 | 1069 | @-moz-keyframes fadeInRightBig { 1070 | 0% { 1071 | opacity: 0; 1072 | -moz-transform: translateX(2000px); 1073 | } 1074 | 1075 | 100% { 1076 | opacity: 1; 1077 | -moz-transform: translateX(0); 1078 | } 1079 | } 1080 | 1081 | @-o-keyframes fadeInRightBig { 1082 | 0% { 1083 | opacity: 0; 1084 | -o-transform: translateX(2000px); 1085 | } 1086 | 1087 | 100% { 1088 | opacity: 1; 1089 | -o-transform: translateX(0); 1090 | } 1091 | } 1092 | 1093 | @keyframes fadeInRightBig { 1094 | 0% { 1095 | opacity: 0; 1096 | transform: translateX(2000px); 1097 | } 1098 | 1099 | 100% { 1100 | opacity: 1; 1101 | transform: translateX(0); 1102 | } 1103 | } 1104 | 1105 | .fadeInRightBig { 1106 | -webkit-animation-name: fadeInRightBig; 1107 | -moz-animation-name: fadeInRightBig; 1108 | -o-animation-name: fadeInRightBig; 1109 | animation-name: fadeInRightBig; 1110 | } 1111 | @-webkit-keyframes fadeOut { 1112 | 0% {opacity: 1;} 1113 | 100% {opacity: 0;} 1114 | } 1115 | 1116 | @-moz-keyframes fadeOut { 1117 | 0% {opacity: 1;} 1118 | 100% {opacity: 0;} 1119 | } 1120 | 1121 | @-o-keyframes fadeOut { 1122 | 0% {opacity: 1;} 1123 | 100% {opacity: 0;} 1124 | } 1125 | 1126 | @keyframes fadeOut { 1127 | 0% {opacity: 1;} 1128 | 100% {opacity: 0;} 1129 | } 1130 | 1131 | .fadeOut { 1132 | -webkit-animation-name: fadeOut; 1133 | -moz-animation-name: fadeOut; 1134 | -o-animation-name: fadeOut; 1135 | animation-name: fadeOut; 1136 | } 1137 | @-webkit-keyframes fadeOutUp { 1138 | 0% { 1139 | opacity: 1; 1140 | -webkit-transform: translateY(0); 1141 | } 1142 | 1143 | 100% { 1144 | opacity: 0; 1145 | -webkit-transform: translateY(-20px); 1146 | } 1147 | } 1148 | @-moz-keyframes fadeOutUp { 1149 | 0% { 1150 | opacity: 1; 1151 | -moz-transform: translateY(0); 1152 | } 1153 | 1154 | 100% { 1155 | opacity: 0; 1156 | -moz-transform: translateY(-20px); 1157 | } 1158 | } 1159 | @-o-keyframes fadeOutUp { 1160 | 0% { 1161 | opacity: 1; 1162 | -o-transform: translateY(0); 1163 | } 1164 | 1165 | 100% { 1166 | opacity: 0; 1167 | -o-transform: translateY(-20px); 1168 | } 1169 | } 1170 | @keyframes fadeOutUp { 1171 | 0% { 1172 | opacity: 1; 1173 | transform: translateY(0); 1174 | } 1175 | 1176 | 100% { 1177 | opacity: 0; 1178 | transform: translateY(-20px); 1179 | } 1180 | } 1181 | 1182 | .fadeOutUp { 1183 | -webkit-animation-name: fadeOutUp; 1184 | -moz-animation-name: fadeOutUp; 1185 | -o-animation-name: fadeOutUp; 1186 | animation-name: fadeOutUp; 1187 | } 1188 | @-webkit-keyframes fadeOutDown { 1189 | 0% { 1190 | opacity: 1; 1191 | -webkit-transform: translateY(0); 1192 | } 1193 | 1194 | 100% { 1195 | opacity: 0; 1196 | -webkit-transform: translateY(20px); 1197 | } 1198 | } 1199 | 1200 | @-moz-keyframes fadeOutDown { 1201 | 0% { 1202 | opacity: 1; 1203 | -moz-transform: translateY(0); 1204 | } 1205 | 1206 | 100% { 1207 | opacity: 0; 1208 | -moz-transform: translateY(20px); 1209 | } 1210 | } 1211 | 1212 | @-o-keyframes fadeOutDown { 1213 | 0% { 1214 | opacity: 1; 1215 | -o-transform: translateY(0); 1216 | } 1217 | 1218 | 100% { 1219 | opacity: 0; 1220 | -o-transform: translateY(20px); 1221 | } 1222 | } 1223 | 1224 | @keyframes fadeOutDown { 1225 | 0% { 1226 | opacity: 1; 1227 | transform: translateY(0); 1228 | } 1229 | 1230 | 100% { 1231 | opacity: 0; 1232 | transform: translateY(20px); 1233 | } 1234 | } 1235 | 1236 | .fadeOutDown { 1237 | -webkit-animation-name: fadeOutDown; 1238 | -moz-animation-name: fadeOutDown; 1239 | -o-animation-name: fadeOutDown; 1240 | animation-name: fadeOutDown; 1241 | } 1242 | @-webkit-keyframes fadeOutLeft { 1243 | 0% { 1244 | opacity: 1; 1245 | -webkit-transform: translateX(0); 1246 | } 1247 | 1248 | 100% { 1249 | opacity: 0; 1250 | -webkit-transform: translateX(-20px); 1251 | } 1252 | } 1253 | 1254 | @-moz-keyframes fadeOutLeft { 1255 | 0% { 1256 | opacity: 1; 1257 | -moz-transform: translateX(0); 1258 | } 1259 | 1260 | 100% { 1261 | opacity: 0; 1262 | -moz-transform: translateX(-20px); 1263 | } 1264 | } 1265 | 1266 | @-o-keyframes fadeOutLeft { 1267 | 0% { 1268 | opacity: 1; 1269 | -o-transform: translateX(0); 1270 | } 1271 | 1272 | 100% { 1273 | opacity: 0; 1274 | -o-transform: translateX(-20px); 1275 | } 1276 | } 1277 | 1278 | @keyframes fadeOutLeft { 1279 | 0% { 1280 | opacity: 1; 1281 | transform: translateX(0); 1282 | } 1283 | 1284 | 100% { 1285 | opacity: 0; 1286 | transform: translateX(-20px); 1287 | } 1288 | } 1289 | 1290 | .fadeOutLeft { 1291 | -webkit-animation-name: fadeOutLeft; 1292 | -moz-animation-name: fadeOutLeft; 1293 | -o-animation-name: fadeOutLeft; 1294 | animation-name: fadeOutLeft; 1295 | } 1296 | @-webkit-keyframes fadeOutRight { 1297 | 0% { 1298 | opacity: 1; 1299 | -webkit-transform: translateX(0); 1300 | } 1301 | 1302 | 100% { 1303 | opacity: 0; 1304 | -webkit-transform: translateX(20px); 1305 | } 1306 | } 1307 | 1308 | @-moz-keyframes fadeOutRight { 1309 | 0% { 1310 | opacity: 1; 1311 | -moz-transform: translateX(0); 1312 | } 1313 | 1314 | 100% { 1315 | opacity: 0; 1316 | -moz-transform: translateX(20px); 1317 | } 1318 | } 1319 | 1320 | @-o-keyframes fadeOutRight { 1321 | 0% { 1322 | opacity: 1; 1323 | -o-transform: translateX(0); 1324 | } 1325 | 1326 | 100% { 1327 | opacity: 0; 1328 | -o-transform: translateX(20px); 1329 | } 1330 | } 1331 | 1332 | @keyframes fadeOutRight { 1333 | 0% { 1334 | opacity: 1; 1335 | transform: translateX(0); 1336 | } 1337 | 1338 | 100% { 1339 | opacity: 0; 1340 | transform: translateX(20px); 1341 | } 1342 | } 1343 | 1344 | .fadeOutRight { 1345 | -webkit-animation-name: fadeOutRight; 1346 | -moz-animation-name: fadeOutRight; 1347 | -o-animation-name: fadeOutRight; 1348 | animation-name: fadeOutRight; 1349 | } 1350 | @-webkit-keyframes fadeOutUpBig { 1351 | 0% { 1352 | opacity: 1; 1353 | -webkit-transform: translateY(0); 1354 | } 1355 | 1356 | 100% { 1357 | opacity: 0; 1358 | -webkit-transform: translateY(-2000px); 1359 | } 1360 | } 1361 | 1362 | @-moz-keyframes fadeOutUpBig { 1363 | 0% { 1364 | opacity: 1; 1365 | -moz-transform: translateY(0); 1366 | } 1367 | 1368 | 100% { 1369 | opacity: 0; 1370 | -moz-transform: translateY(-2000px); 1371 | } 1372 | } 1373 | 1374 | @-o-keyframes fadeOutUpBig { 1375 | 0% { 1376 | opacity: 1; 1377 | -o-transform: translateY(0); 1378 | } 1379 | 1380 | 100% { 1381 | opacity: 0; 1382 | -o-transform: translateY(-2000px); 1383 | } 1384 | } 1385 | 1386 | @keyframes fadeOutUpBig { 1387 | 0% { 1388 | opacity: 1; 1389 | transform: translateY(0); 1390 | } 1391 | 1392 | 100% { 1393 | opacity: 0; 1394 | transform: translateY(-2000px); 1395 | } 1396 | } 1397 | 1398 | .fadeOutUpBig { 1399 | -webkit-animation-name: fadeOutUpBig; 1400 | -moz-animation-name: fadeOutUpBig; 1401 | -o-animation-name: fadeOutUpBig; 1402 | animation-name: fadeOutUpBig; 1403 | } 1404 | @-webkit-keyframes fadeOutDownBig { 1405 | 0% { 1406 | opacity: 1; 1407 | -webkit-transform: translateY(0); 1408 | } 1409 | 1410 | 100% { 1411 | opacity: 0; 1412 | -webkit-transform: translateY(2000px); 1413 | } 1414 | } 1415 | 1416 | @-moz-keyframes fadeOutDownBig { 1417 | 0% { 1418 | opacity: 1; 1419 | -moz-transform: translateY(0); 1420 | } 1421 | 1422 | 100% { 1423 | opacity: 0; 1424 | -moz-transform: translateY(2000px); 1425 | } 1426 | } 1427 | 1428 | @-o-keyframes fadeOutDownBig { 1429 | 0% { 1430 | opacity: 1; 1431 | -o-transform: translateY(0); 1432 | } 1433 | 1434 | 100% { 1435 | opacity: 0; 1436 | -o-transform: translateY(2000px); 1437 | } 1438 | } 1439 | 1440 | @keyframes fadeOutDownBig { 1441 | 0% { 1442 | opacity: 1; 1443 | transform: translateY(0); 1444 | } 1445 | 1446 | 100% { 1447 | opacity: 0; 1448 | transform: translateY(2000px); 1449 | } 1450 | } 1451 | 1452 | .fadeOutDownBig { 1453 | -webkit-animation-name: fadeOutDownBig; 1454 | -moz-animation-name: fadeOutDownBig; 1455 | -o-animation-name: fadeOutDownBig; 1456 | animation-name: fadeOutDownBig; 1457 | } 1458 | @-webkit-keyframes fadeOutLeftBig { 1459 | 0% { 1460 | opacity: 1; 1461 | -webkit-transform: translateX(0); 1462 | } 1463 | 1464 | 100% { 1465 | opacity: 0; 1466 | -webkit-transform: translateX(-2000px); 1467 | } 1468 | } 1469 | 1470 | @-moz-keyframes fadeOutLeftBig { 1471 | 0% { 1472 | opacity: 1; 1473 | -moz-transform: translateX(0); 1474 | } 1475 | 1476 | 100% { 1477 | opacity: 0; 1478 | -moz-transform: translateX(-2000px); 1479 | } 1480 | } 1481 | 1482 | @-o-keyframes fadeOutLeftBig { 1483 | 0% { 1484 | opacity: 1; 1485 | -o-transform: translateX(0); 1486 | } 1487 | 1488 | 100% { 1489 | opacity: 0; 1490 | -o-transform: translateX(-2000px); 1491 | } 1492 | } 1493 | 1494 | @keyframes fadeOutLeftBig { 1495 | 0% { 1496 | opacity: 1; 1497 | transform: translateX(0); 1498 | } 1499 | 1500 | 100% { 1501 | opacity: 0; 1502 | transform: translateX(-2000px); 1503 | } 1504 | } 1505 | 1506 | .fadeOutLeftBig { 1507 | -webkit-animation-name: fadeOutLeftBig; 1508 | -moz-animation-name: fadeOutLeftBig; 1509 | -o-animation-name: fadeOutLeftBig; 1510 | animation-name: fadeOutLeftBig; 1511 | } 1512 | @-webkit-keyframes fadeOutRightBig { 1513 | 0% { 1514 | opacity: 1; 1515 | -webkit-transform: translateX(0); 1516 | } 1517 | 1518 | 100% { 1519 | opacity: 0; 1520 | -webkit-transform: translateX(2000px); 1521 | } 1522 | } 1523 | @-moz-keyframes fadeOutRightBig { 1524 | 0% { 1525 | opacity: 1; 1526 | -moz-transform: translateX(0); 1527 | } 1528 | 1529 | 100% { 1530 | opacity: 0; 1531 | -moz-transform: translateX(2000px); 1532 | } 1533 | } 1534 | @-o-keyframes fadeOutRightBig { 1535 | 0% { 1536 | opacity: 1; 1537 | -o-transform: translateX(0); 1538 | } 1539 | 1540 | 100% { 1541 | opacity: 0; 1542 | -o-transform: translateX(2000px); 1543 | } 1544 | } 1545 | @keyframes fadeOutRightBig { 1546 | 0% { 1547 | opacity: 1; 1548 | transform: translateX(0); 1549 | } 1550 | 1551 | 100% { 1552 | opacity: 0; 1553 | transform: translateX(2000px); 1554 | } 1555 | } 1556 | 1557 | .fadeOutRightBig { 1558 | -webkit-animation-name: fadeOutRightBig; 1559 | -moz-animation-name: fadeOutRightBig; 1560 | -o-animation-name: fadeOutRightBig; 1561 | animation-name: fadeOutRightBig; 1562 | } 1563 | @-webkit-keyframes bounceIn { 1564 | 0% { 1565 | opacity: 0; 1566 | -webkit-transform: scale(.3); 1567 | } 1568 | 1569 | 50% { 1570 | opacity: 1; 1571 | -webkit-transform: scale(1.05); 1572 | } 1573 | 1574 | 70% { 1575 | -webkit-transform: scale(.9); 1576 | } 1577 | 1578 | 100% { 1579 | -webkit-transform: scale(1); 1580 | } 1581 | } 1582 | 1583 | @-moz-keyframes bounceIn { 1584 | 0% { 1585 | opacity: 0; 1586 | -moz-transform: scale(.3); 1587 | } 1588 | 1589 | 50% { 1590 | opacity: 1; 1591 | -moz-transform: scale(1.05); 1592 | } 1593 | 1594 | 70% { 1595 | -moz-transform: scale(.9); 1596 | } 1597 | 1598 | 100% { 1599 | -moz-transform: scale(1); 1600 | } 1601 | } 1602 | 1603 | @-o-keyframes bounceIn { 1604 | 0% { 1605 | opacity: 0; 1606 | -o-transform: scale(.3); 1607 | } 1608 | 1609 | 50% { 1610 | opacity: 1; 1611 | -o-transform: scale(1.05); 1612 | } 1613 | 1614 | 70% { 1615 | -o-transform: scale(.9); 1616 | } 1617 | 1618 | 100% { 1619 | -o-transform: scale(1); 1620 | } 1621 | } 1622 | 1623 | @keyframes bounceIn { 1624 | 0% { 1625 | opacity: 0; 1626 | transform: scale(.3); 1627 | } 1628 | 1629 | 50% { 1630 | opacity: 1; 1631 | transform: scale(1.05); 1632 | } 1633 | 1634 | 70% { 1635 | transform: scale(.9); 1636 | } 1637 | 1638 | 100% { 1639 | transform: scale(1); 1640 | } 1641 | } 1642 | 1643 | .bounceIn { 1644 | -webkit-animation-name: bounceIn; 1645 | -moz-animation-name: bounceIn; 1646 | -o-animation-name: bounceIn; 1647 | animation-name: bounceIn; 1648 | } 1649 | @-webkit-keyframes bounceInUp { 1650 | 0% { 1651 | opacity: 0; 1652 | -webkit-transform: translateY(2000px); 1653 | } 1654 | 1655 | 60% { 1656 | opacity: 1; 1657 | -webkit-transform: translateY(-30px); 1658 | } 1659 | 1660 | 80% { 1661 | -webkit-transform: translateY(10px); 1662 | } 1663 | 1664 | 100% { 1665 | -webkit-transform: translateY(0); 1666 | } 1667 | } 1668 | @-moz-keyframes bounceInUp { 1669 | 0% { 1670 | opacity: 0; 1671 | -moz-transform: translateY(2000px); 1672 | } 1673 | 1674 | 60% { 1675 | opacity: 1; 1676 | -moz-transform: translateY(-30px); 1677 | } 1678 | 1679 | 80% { 1680 | -moz-transform: translateY(10px); 1681 | } 1682 | 1683 | 100% { 1684 | -moz-transform: translateY(0); 1685 | } 1686 | } 1687 | 1688 | @-o-keyframes bounceInUp { 1689 | 0% { 1690 | opacity: 0; 1691 | -o-transform: translateY(2000px); 1692 | } 1693 | 1694 | 60% { 1695 | opacity: 1; 1696 | -o-transform: translateY(-30px); 1697 | } 1698 | 1699 | 80% { 1700 | -o-transform: translateY(10px); 1701 | } 1702 | 1703 | 100% { 1704 | -o-transform: translateY(0); 1705 | } 1706 | } 1707 | 1708 | @keyframes bounceInUp { 1709 | 0% { 1710 | opacity: 0; 1711 | transform: translateY(2000px); 1712 | } 1713 | 1714 | 60% { 1715 | opacity: 1; 1716 | transform: translateY(-30px); 1717 | } 1718 | 1719 | 80% { 1720 | transform: translateY(10px); 1721 | } 1722 | 1723 | 100% { 1724 | transform: translateY(0); 1725 | } 1726 | } 1727 | 1728 | .bounceInUp { 1729 | -webkit-animation-name: bounceInUp; 1730 | -moz-animation-name: bounceInUp; 1731 | -o-animation-name: bounceInUp; 1732 | animation-name: bounceInUp; 1733 | } 1734 | @-webkit-keyframes bounceInDown { 1735 | 0% { 1736 | opacity: 0; 1737 | -webkit-transform: translateY(-2000px); 1738 | } 1739 | 1740 | 60% { 1741 | opacity: 1; 1742 | -webkit-transform: translateY(30px); 1743 | } 1744 | 1745 | 80% { 1746 | -webkit-transform: translateY(-10px); 1747 | } 1748 | 1749 | 100% { 1750 | -webkit-transform: translateY(0); 1751 | } 1752 | } 1753 | 1754 | @-moz-keyframes bounceInDown { 1755 | 0% { 1756 | opacity: 0; 1757 | -moz-transform: translateY(-2000px); 1758 | } 1759 | 1760 | 60% { 1761 | opacity: 1; 1762 | -moz-transform: translateY(30px); 1763 | } 1764 | 1765 | 80% { 1766 | -moz-transform: translateY(-10px); 1767 | } 1768 | 1769 | 100% { 1770 | -moz-transform: translateY(0); 1771 | } 1772 | } 1773 | 1774 | @-o-keyframes bounceInDown { 1775 | 0% { 1776 | opacity: 0; 1777 | -o-transform: translateY(-2000px); 1778 | } 1779 | 1780 | 60% { 1781 | opacity: 1; 1782 | -o-transform: translateY(30px); 1783 | } 1784 | 1785 | 80% { 1786 | -o-transform: translateY(-10px); 1787 | } 1788 | 1789 | 100% { 1790 | -o-transform: translateY(0); 1791 | } 1792 | } 1793 | 1794 | @keyframes bounceInDown { 1795 | 0% { 1796 | opacity: 0; 1797 | transform: translateY(-2000px); 1798 | } 1799 | 1800 | 60% { 1801 | opacity: 1; 1802 | transform: translateY(30px); 1803 | } 1804 | 1805 | 80% { 1806 | transform: translateY(-10px); 1807 | } 1808 | 1809 | 100% { 1810 | transform: translateY(0); 1811 | } 1812 | } 1813 | 1814 | .bounceInDown { 1815 | -webkit-animation-name: bounceInDown; 1816 | -moz-animation-name: bounceInDown; 1817 | -o-animation-name: bounceInDown; 1818 | animation-name: bounceInDown; 1819 | } 1820 | @-webkit-keyframes bounceInLeft { 1821 | 0% { 1822 | opacity: 0; 1823 | -webkit-transform: translateX(-2000px); 1824 | } 1825 | 1826 | 60% { 1827 | opacity: 1; 1828 | -webkit-transform: translateX(30px); 1829 | } 1830 | 1831 | 80% { 1832 | -webkit-transform: translateX(-10px); 1833 | } 1834 | 1835 | 100% { 1836 | -webkit-transform: translateX(0); 1837 | } 1838 | } 1839 | 1840 | @-moz-keyframes bounceInLeft { 1841 | 0% { 1842 | opacity: 0; 1843 | -moz-transform: translateX(-2000px); 1844 | } 1845 | 1846 | 60% { 1847 | opacity: 1; 1848 | -moz-transform: translateX(30px); 1849 | } 1850 | 1851 | 80% { 1852 | -moz-transform: translateX(-10px); 1853 | } 1854 | 1855 | 100% { 1856 | -moz-transform: translateX(0); 1857 | } 1858 | } 1859 | 1860 | @-o-keyframes bounceInLeft { 1861 | 0% { 1862 | opacity: 0; 1863 | -o-transform: translateX(-2000px); 1864 | } 1865 | 1866 | 60% { 1867 | opacity: 1; 1868 | -o-transform: translateX(30px); 1869 | } 1870 | 1871 | 80% { 1872 | -o-transform: translateX(-10px); 1873 | } 1874 | 1875 | 100% { 1876 | -o-transform: translateX(0); 1877 | } 1878 | } 1879 | 1880 | @keyframes bounceInLeft { 1881 | 0% { 1882 | opacity: 0; 1883 | transform: translateX(-2000px); 1884 | } 1885 | 1886 | 60% { 1887 | opacity: 1; 1888 | transform: translateX(30px); 1889 | } 1890 | 1891 | 80% { 1892 | transform: translateX(-10px); 1893 | } 1894 | 1895 | 100% { 1896 | transform: translateX(0); 1897 | } 1898 | } 1899 | 1900 | .bounceInLeft { 1901 | -webkit-animation-name: bounceInLeft; 1902 | -moz-animation-name: bounceInLeft; 1903 | -o-animation-name: bounceInLeft; 1904 | animation-name: bounceInLeft; 1905 | } 1906 | @-webkit-keyframes bounceInRight { 1907 | 0% { 1908 | opacity: 0; 1909 | -webkit-transform: translateX(2000px); 1910 | } 1911 | 1912 | 60% { 1913 | opacity: 1; 1914 | -webkit-transform: translateX(-30px); 1915 | } 1916 | 1917 | 80% { 1918 | -webkit-transform: translateX(10px); 1919 | } 1920 | 1921 | 100% { 1922 | -webkit-transform: translateX(0); 1923 | } 1924 | } 1925 | 1926 | @-moz-keyframes bounceInRight { 1927 | 0% { 1928 | opacity: 0; 1929 | -moz-transform: translateX(2000px); 1930 | } 1931 | 1932 | 60% { 1933 | opacity: 1; 1934 | -moz-transform: translateX(-30px); 1935 | } 1936 | 1937 | 80% { 1938 | -moz-transform: translateX(10px); 1939 | } 1940 | 1941 | 100% { 1942 | -moz-transform: translateX(0); 1943 | } 1944 | } 1945 | 1946 | @-o-keyframes bounceInRight { 1947 | 0% { 1948 | opacity: 0; 1949 | -o-transform: translateX(2000px); 1950 | } 1951 | 1952 | 60% { 1953 | opacity: 1; 1954 | -o-transform: translateX(-30px); 1955 | } 1956 | 1957 | 80% { 1958 | -o-transform: translateX(10px); 1959 | } 1960 | 1961 | 100% { 1962 | -o-transform: translateX(0); 1963 | } 1964 | } 1965 | 1966 | @keyframes bounceInRight { 1967 | 0% { 1968 | opacity: 0; 1969 | transform: translateX(2000px); 1970 | } 1971 | 1972 | 60% { 1973 | opacity: 1; 1974 | transform: translateX(-30px); 1975 | } 1976 | 1977 | 80% { 1978 | transform: translateX(10px); 1979 | } 1980 | 1981 | 100% { 1982 | transform: translateX(0); 1983 | } 1984 | } 1985 | 1986 | .bounceInRight { 1987 | -webkit-animation-name: bounceInRight; 1988 | -moz-animation-name: bounceInRight; 1989 | -o-animation-name: bounceInRight; 1990 | animation-name: bounceInRight; 1991 | } 1992 | @-webkit-keyframes bounceOut { 1993 | 0% { 1994 | -webkit-transform: scale(1); 1995 | } 1996 | 1997 | 25% { 1998 | -webkit-transform: scale(.95); 1999 | } 2000 | 2001 | 50% { 2002 | opacity: 1; 2003 | -webkit-transform: scale(1.1); 2004 | } 2005 | 2006 | 100% { 2007 | opacity: 0; 2008 | -webkit-transform: scale(.3); 2009 | } 2010 | } 2011 | 2012 | @-moz-keyframes bounceOut { 2013 | 0% { 2014 | -moz-transform: scale(1); 2015 | } 2016 | 2017 | 25% { 2018 | -moz-transform: scale(.95); 2019 | } 2020 | 2021 | 50% { 2022 | opacity: 1; 2023 | -moz-transform: scale(1.1); 2024 | } 2025 | 2026 | 100% { 2027 | opacity: 0; 2028 | -moz-transform: scale(.3); 2029 | } 2030 | } 2031 | 2032 | @-o-keyframes bounceOut { 2033 | 0% { 2034 | -o-transform: scale(1); 2035 | } 2036 | 2037 | 25% { 2038 | -o-transform: scale(.95); 2039 | } 2040 | 2041 | 50% { 2042 | opacity: 1; 2043 | -o-transform: scale(1.1); 2044 | } 2045 | 2046 | 100% { 2047 | opacity: 0; 2048 | -o-transform: scale(.3); 2049 | } 2050 | } 2051 | 2052 | @keyframes bounceOut { 2053 | 0% { 2054 | transform: scale(1); 2055 | } 2056 | 2057 | 25% { 2058 | transform: scale(.95); 2059 | } 2060 | 2061 | 50% { 2062 | opacity: 1; 2063 | transform: scale(1.1); 2064 | } 2065 | 2066 | 100% { 2067 | opacity: 0; 2068 | transform: scale(.3); 2069 | } 2070 | } 2071 | 2072 | .bounceOut { 2073 | -webkit-animation-name: bounceOut; 2074 | -moz-animation-name: bounceOut; 2075 | -o-animation-name: bounceOut; 2076 | animation-name: bounceOut; 2077 | } 2078 | @-webkit-keyframes bounceOutUp { 2079 | 0% { 2080 | -webkit-transform: translateY(0); 2081 | } 2082 | 2083 | 20% { 2084 | opacity: 1; 2085 | -webkit-transform: translateY(20px); 2086 | } 2087 | 2088 | 100% { 2089 | opacity: 0; 2090 | -webkit-transform: translateY(-2000px); 2091 | } 2092 | } 2093 | 2094 | @-moz-keyframes bounceOutUp { 2095 | 0% { 2096 | -moz-transform: translateY(0); 2097 | } 2098 | 2099 | 20% { 2100 | opacity: 1; 2101 | -moz-transform: translateY(20px); 2102 | } 2103 | 2104 | 100% { 2105 | opacity: 0; 2106 | -moz-transform: translateY(-2000px); 2107 | } 2108 | } 2109 | 2110 | @-o-keyframes bounceOutUp { 2111 | 0% { 2112 | -o-transform: translateY(0); 2113 | } 2114 | 2115 | 20% { 2116 | opacity: 1; 2117 | -o-transform: translateY(20px); 2118 | } 2119 | 2120 | 100% { 2121 | opacity: 0; 2122 | -o-transform: translateY(-2000px); 2123 | } 2124 | } 2125 | 2126 | @keyframes bounceOutUp { 2127 | 0% { 2128 | transform: translateY(0); 2129 | } 2130 | 2131 | 20% { 2132 | opacity: 1; 2133 | transform: translateY(20px); 2134 | } 2135 | 2136 | 100% { 2137 | opacity: 0; 2138 | transform: translateY(-2000px); 2139 | } 2140 | } 2141 | 2142 | .bounceOutUp { 2143 | -webkit-animation-name: bounceOutUp; 2144 | -moz-animation-name: bounceOutUp; 2145 | -o-animation-name: bounceOutUp; 2146 | animation-name: bounceOutUp; 2147 | } 2148 | @-webkit-keyframes bounceOutDown { 2149 | 0% { 2150 | -webkit-transform: translateY(0); 2151 | } 2152 | 2153 | 20% { 2154 | opacity: 1; 2155 | -webkit-transform: translateY(-20px); 2156 | } 2157 | 2158 | 100% { 2159 | opacity: 0; 2160 | -webkit-transform: translateY(2000px); 2161 | } 2162 | } 2163 | 2164 | @-moz-keyframes bounceOutDown { 2165 | 0% { 2166 | -moz-transform: translateY(0); 2167 | } 2168 | 2169 | 20% { 2170 | opacity: 1; 2171 | -moz-transform: translateY(-20px); 2172 | } 2173 | 2174 | 100% { 2175 | opacity: 0; 2176 | -moz-transform: translateY(2000px); 2177 | } 2178 | } 2179 | 2180 | @-o-keyframes bounceOutDown { 2181 | 0% { 2182 | -o-transform: translateY(0); 2183 | } 2184 | 2185 | 20% { 2186 | opacity: 1; 2187 | -o-transform: translateY(-20px); 2188 | } 2189 | 2190 | 100% { 2191 | opacity: 0; 2192 | -o-transform: translateY(2000px); 2193 | } 2194 | } 2195 | 2196 | @keyframes bounceOutDown { 2197 | 0% { 2198 | transform: translateY(0); 2199 | } 2200 | 2201 | 20% { 2202 | opacity: 1; 2203 | transform: translateY(-20px); 2204 | } 2205 | 2206 | 100% { 2207 | opacity: 0; 2208 | transform: translateY(2000px); 2209 | } 2210 | } 2211 | 2212 | .bounceOutDown { 2213 | -webkit-animation-name: bounceOutDown; 2214 | -moz-animation-name: bounceOutDown; 2215 | -o-animation-name: bounceOutDown; 2216 | animation-name: bounceOutDown; 2217 | } 2218 | @-webkit-keyframes bounceOutLeft { 2219 | 0% { 2220 | -webkit-transform: translateX(0); 2221 | } 2222 | 2223 | 20% { 2224 | opacity: 1; 2225 | -webkit-transform: translateX(20px); 2226 | } 2227 | 2228 | 100% { 2229 | opacity: 0; 2230 | -webkit-transform: translateX(-2000px); 2231 | } 2232 | } 2233 | 2234 | @-moz-keyframes bounceOutLeft { 2235 | 0% { 2236 | -moz-transform: translateX(0); 2237 | } 2238 | 2239 | 20% { 2240 | opacity: 1; 2241 | -moz-transform: translateX(20px); 2242 | } 2243 | 2244 | 100% { 2245 | opacity: 0; 2246 | -moz-transform: translateX(-2000px); 2247 | } 2248 | } 2249 | 2250 | @-o-keyframes bounceOutLeft { 2251 | 0% { 2252 | -o-transform: translateX(0); 2253 | } 2254 | 2255 | 20% { 2256 | opacity: 1; 2257 | -o-transform: translateX(20px); 2258 | } 2259 | 2260 | 100% { 2261 | opacity: 0; 2262 | -o-transform: translateX(-2000px); 2263 | } 2264 | } 2265 | 2266 | @keyframes bounceOutLeft { 2267 | 0% { 2268 | transform: translateX(0); 2269 | } 2270 | 2271 | 20% { 2272 | opacity: 1; 2273 | transform: translateX(20px); 2274 | } 2275 | 2276 | 100% { 2277 | opacity: 0; 2278 | transform: translateX(-2000px); 2279 | } 2280 | } 2281 | 2282 | .bounceOutLeft { 2283 | -webkit-animation-name: bounceOutLeft; 2284 | -moz-animation-name: bounceOutLeft; 2285 | -o-animation-name: bounceOutLeft; 2286 | animation-name: bounceOutLeft; 2287 | } 2288 | @-webkit-keyframes bounceOutRight { 2289 | 0% { 2290 | -webkit-transform: translateX(0); 2291 | } 2292 | 2293 | 20% { 2294 | opacity: 1; 2295 | -webkit-transform: translateX(-20px); 2296 | } 2297 | 2298 | 100% { 2299 | opacity: 0; 2300 | -webkit-transform: translateX(2000px); 2301 | } 2302 | } 2303 | 2304 | @-moz-keyframes bounceOutRight { 2305 | 0% { 2306 | -moz-transform: translateX(0); 2307 | } 2308 | 2309 | 20% { 2310 | opacity: 1; 2311 | -moz-transform: translateX(-20px); 2312 | } 2313 | 2314 | 100% { 2315 | opacity: 0; 2316 | -moz-transform: translateX(2000px); 2317 | } 2318 | } 2319 | 2320 | @-o-keyframes bounceOutRight { 2321 | 0% { 2322 | -o-transform: translateX(0); 2323 | } 2324 | 2325 | 20% { 2326 | opacity: 1; 2327 | -o-transform: translateX(-20px); 2328 | } 2329 | 2330 | 100% { 2331 | opacity: 0; 2332 | -o-transform: translateX(2000px); 2333 | } 2334 | } 2335 | 2336 | @keyframes bounceOutRight { 2337 | 0% { 2338 | transform: translateX(0); 2339 | } 2340 | 2341 | 20% { 2342 | opacity: 1; 2343 | transform: translateX(-20px); 2344 | } 2345 | 2346 | 100% { 2347 | opacity: 0; 2348 | transform: translateX(2000px); 2349 | } 2350 | } 2351 | 2352 | .bounceOutRight { 2353 | -webkit-animation-name: bounceOutRight; 2354 | -moz-animation-name: bounceOutRight; 2355 | -o-animation-name: bounceOutRight; 2356 | animation-name: bounceOutRight; 2357 | } 2358 | @-webkit-keyframes rotateIn { 2359 | 0% { 2360 | -webkit-transform-origin: center center; 2361 | -webkit-transform: rotate(-200deg); 2362 | opacity: 0; 2363 | } 2364 | 2365 | 100% { 2366 | -webkit-transform-origin: center center; 2367 | -webkit-transform: rotate(0); 2368 | opacity: 1; 2369 | } 2370 | } 2371 | @-moz-keyframes rotateIn { 2372 | 0% { 2373 | -moz-transform-origin: center center; 2374 | -moz-transform: rotate(-200deg); 2375 | opacity: 0; 2376 | } 2377 | 2378 | 100% { 2379 | -moz-transform-origin: center center; 2380 | -moz-transform: rotate(0); 2381 | opacity: 1; 2382 | } 2383 | } 2384 | @-o-keyframes rotateIn { 2385 | 0% { 2386 | -o-transform-origin: center center; 2387 | -o-transform: rotate(-200deg); 2388 | opacity: 0; 2389 | } 2390 | 2391 | 100% { 2392 | -o-transform-origin: center center; 2393 | -o-transform: rotate(0); 2394 | opacity: 1; 2395 | } 2396 | } 2397 | @keyframes rotateIn { 2398 | 0% { 2399 | transform-origin: center center; 2400 | transform: rotate(-200deg); 2401 | opacity: 0; 2402 | } 2403 | 2404 | 100% { 2405 | transform-origin: center center; 2406 | transform: rotate(0); 2407 | opacity: 1; 2408 | } 2409 | } 2410 | 2411 | .rotateIn { 2412 | -webkit-animation-name: rotateIn; 2413 | -moz-animation-name: rotateIn; 2414 | -o-animation-name: rotateIn; 2415 | animation-name: rotateIn; 2416 | } 2417 | @-webkit-keyframes rotateInUpLeft { 2418 | 0% { 2419 | -webkit-transform-origin: left bottom; 2420 | -webkit-transform: rotate(90deg); 2421 | opacity: 0; 2422 | } 2423 | 2424 | 100% { 2425 | -webkit-transform-origin: left bottom; 2426 | -webkit-transform: rotate(0); 2427 | opacity: 1; 2428 | } 2429 | } 2430 | 2431 | @-moz-keyframes rotateInUpLeft { 2432 | 0% { 2433 | -moz-transform-origin: left bottom; 2434 | -moz-transform: rotate(90deg); 2435 | opacity: 0; 2436 | } 2437 | 2438 | 100% { 2439 | -moz-transform-origin: left bottom; 2440 | -moz-transform: rotate(0); 2441 | opacity: 1; 2442 | } 2443 | } 2444 | 2445 | @-o-keyframes rotateInUpLeft { 2446 | 0% { 2447 | -o-transform-origin: left bottom; 2448 | -o-transform: rotate(90deg); 2449 | opacity: 0; 2450 | } 2451 | 2452 | 100% { 2453 | -o-transform-origin: left bottom; 2454 | -o-transform: rotate(0); 2455 | opacity: 1; 2456 | } 2457 | } 2458 | 2459 | @keyframes rotateInUpLeft { 2460 | 0% { 2461 | transform-origin: left bottom; 2462 | transform: rotate(90deg); 2463 | opacity: 0; 2464 | } 2465 | 2466 | 100% { 2467 | transform-origin: left bottom; 2468 | transform: rotate(0); 2469 | opacity: 1; 2470 | } 2471 | } 2472 | 2473 | .rotateInUpLeft { 2474 | -webkit-animation-name: rotateInUpLeft; 2475 | -moz-animation-name: rotateInUpLeft; 2476 | -o-animation-name: rotateInUpLeft; 2477 | animation-name: rotateInUpLeft; 2478 | } 2479 | @-webkit-keyframes rotateInDownLeft { 2480 | 0% { 2481 | -webkit-transform-origin: left bottom; 2482 | -webkit-transform: rotate(-90deg); 2483 | opacity: 0; 2484 | } 2485 | 2486 | 100% { 2487 | -webkit-transform-origin: left bottom; 2488 | -webkit-transform: rotate(0); 2489 | opacity: 1; 2490 | } 2491 | } 2492 | 2493 | @-moz-keyframes rotateInDownLeft { 2494 | 0% { 2495 | -moz-transform-origin: left bottom; 2496 | -moz-transform: rotate(-90deg); 2497 | opacity: 0; 2498 | } 2499 | 2500 | 100% { 2501 | -moz-transform-origin: left bottom; 2502 | -moz-transform: rotate(0); 2503 | opacity: 1; 2504 | } 2505 | } 2506 | 2507 | @-o-keyframes rotateInDownLeft { 2508 | 0% { 2509 | -o-transform-origin: left bottom; 2510 | -o-transform: rotate(-90deg); 2511 | opacity: 0; 2512 | } 2513 | 2514 | 100% { 2515 | -o-transform-origin: left bottom; 2516 | -o-transform: rotate(0); 2517 | opacity: 1; 2518 | } 2519 | } 2520 | 2521 | @keyframes rotateInDownLeft { 2522 | 0% { 2523 | transform-origin: left bottom; 2524 | transform: rotate(-90deg); 2525 | opacity: 0; 2526 | } 2527 | 2528 | 100% { 2529 | transform-origin: left bottom; 2530 | transform: rotate(0); 2531 | opacity: 1; 2532 | } 2533 | } 2534 | 2535 | .rotateInDownLeft { 2536 | -webkit-animation-name: rotateInDownLeft; 2537 | -moz-animation-name: rotateInDownLeft; 2538 | -o-animation-name: rotateInDownLeft; 2539 | animation-name: rotateInDownLeft; 2540 | } 2541 | @-webkit-keyframes rotateInUpRight { 2542 | 0% { 2543 | -webkit-transform-origin: right bottom; 2544 | -webkit-transform: rotate(-90deg); 2545 | opacity: 0; 2546 | } 2547 | 2548 | 100% { 2549 | -webkit-transform-origin: right bottom; 2550 | -webkit-transform: rotate(0); 2551 | opacity: 1; 2552 | } 2553 | } 2554 | 2555 | @-moz-keyframes rotateInUpRight { 2556 | 0% { 2557 | -moz-transform-origin: right bottom; 2558 | -moz-transform: rotate(-90deg); 2559 | opacity: 0; 2560 | } 2561 | 2562 | 100% { 2563 | -moz-transform-origin: right bottom; 2564 | -moz-transform: rotate(0); 2565 | opacity: 1; 2566 | } 2567 | } 2568 | 2569 | @-o-keyframes rotateInUpRight { 2570 | 0% { 2571 | -o-transform-origin: right bottom; 2572 | -o-transform: rotate(-90deg); 2573 | opacity: 0; 2574 | } 2575 | 2576 | 100% { 2577 | -o-transform-origin: right bottom; 2578 | -o-transform: rotate(0); 2579 | opacity: 1; 2580 | } 2581 | } 2582 | 2583 | @keyframes rotateInUpRight { 2584 | 0% { 2585 | transform-origin: right bottom; 2586 | transform: rotate(-90deg); 2587 | opacity: 0; 2588 | } 2589 | 2590 | 100% { 2591 | transform-origin: right bottom; 2592 | transform: rotate(0); 2593 | opacity: 1; 2594 | } 2595 | } 2596 | 2597 | .rotateInUpRight { 2598 | -webkit-animation-name: rotateInUpRight; 2599 | -moz-animation-name: rotateInUpRight; 2600 | -o-animation-name: rotateInUpRight; 2601 | animation-name: rotateInUpRight; 2602 | } 2603 | @-webkit-keyframes rotateInDownRight { 2604 | 0% { 2605 | -webkit-transform-origin: right bottom; 2606 | -webkit-transform: rotate(90deg); 2607 | opacity: 0; 2608 | } 2609 | 2610 | 100% { 2611 | -webkit-transform-origin: right bottom; 2612 | -webkit-transform: rotate(0); 2613 | opacity: 1; 2614 | } 2615 | } 2616 | 2617 | @-moz-keyframes rotateInDownRight { 2618 | 0% { 2619 | -moz-transform-origin: right bottom; 2620 | -moz-transform: rotate(90deg); 2621 | opacity: 0; 2622 | } 2623 | 2624 | 100% { 2625 | -moz-transform-origin: right bottom; 2626 | -moz-transform: rotate(0); 2627 | opacity: 1; 2628 | } 2629 | } 2630 | 2631 | @-o-keyframes rotateInDownRight { 2632 | 0% { 2633 | -o-transform-origin: right bottom; 2634 | -o-transform: rotate(90deg); 2635 | opacity: 0; 2636 | } 2637 | 2638 | 100% { 2639 | -o-transform-origin: right bottom; 2640 | -o-transform: rotate(0); 2641 | opacity: 1; 2642 | } 2643 | } 2644 | 2645 | @keyframes rotateInDownRight { 2646 | 0% { 2647 | transform-origin: right bottom; 2648 | transform: rotate(90deg); 2649 | opacity: 0; 2650 | } 2651 | 2652 | 100% { 2653 | transform-origin: right bottom; 2654 | transform: rotate(0); 2655 | opacity: 1; 2656 | } 2657 | } 2658 | 2659 | .rotateInDownRight { 2660 | -webkit-animation-name: rotateInDownRight; 2661 | -moz-animation-name: rotateInDownRight; 2662 | -o-animation-name: rotateInDownRight; 2663 | animation-name: rotateInDownRight; 2664 | } 2665 | @-webkit-keyframes rotateOut { 2666 | 0% { 2667 | -webkit-transform-origin: center center; 2668 | -webkit-transform: rotate(0); 2669 | opacity: 1; 2670 | } 2671 | 2672 | 100% { 2673 | -webkit-transform-origin: center center; 2674 | -webkit-transform: rotate(200deg); 2675 | opacity: 0; 2676 | } 2677 | } 2678 | 2679 | @-moz-keyframes rotateOut { 2680 | 0% { 2681 | -moz-transform-origin: center center; 2682 | -moz-transform: rotate(0); 2683 | opacity: 1; 2684 | } 2685 | 2686 | 100% { 2687 | -moz-transform-origin: center center; 2688 | -moz-transform: rotate(200deg); 2689 | opacity: 0; 2690 | } 2691 | } 2692 | 2693 | @-o-keyframes rotateOut { 2694 | 0% { 2695 | -o-transform-origin: center center; 2696 | -o-transform: rotate(0); 2697 | opacity: 1; 2698 | } 2699 | 2700 | 100% { 2701 | -o-transform-origin: center center; 2702 | -o-transform: rotate(200deg); 2703 | opacity: 0; 2704 | } 2705 | } 2706 | 2707 | @keyframes rotateOut { 2708 | 0% { 2709 | transform-origin: center center; 2710 | transform: rotate(0); 2711 | opacity: 1; 2712 | } 2713 | 2714 | 100% { 2715 | transform-origin: center center; 2716 | transform: rotate(200deg); 2717 | opacity: 0; 2718 | } 2719 | } 2720 | 2721 | .rotateOut { 2722 | -webkit-animation-name: rotateOut; 2723 | -moz-animation-name: rotateOut; 2724 | -o-animation-name: rotateOut; 2725 | animation-name: rotateOut; 2726 | } 2727 | @-webkit-keyframes rotateOutUpLeft { 2728 | 0% { 2729 | -webkit-transform-origin: left bottom; 2730 | -webkit-transform: rotate(0); 2731 | opacity: 1; 2732 | } 2733 | 2734 | 100% { 2735 | -webkit-transform-origin: left bottom; 2736 | -webkit-transform: rotate(-90deg); 2737 | opacity: 0; 2738 | } 2739 | } 2740 | 2741 | @-moz-keyframes rotateOutUpLeft { 2742 | 0% { 2743 | -moz-transform-origin: left bottom; 2744 | -moz-transform: rotate(0); 2745 | opacity: 1; 2746 | } 2747 | 2748 | 100% { 2749 | -moz-transform-origin: left bottom; 2750 | -moz-transform: rotate(-90deg); 2751 | opacity: 0; 2752 | } 2753 | } 2754 | 2755 | @-o-keyframes rotateOutUpLeft { 2756 | 0% { 2757 | -o-transform-origin: left bottom; 2758 | -o-transform: rotate(0); 2759 | opacity: 1; 2760 | } 2761 | 2762 | 100% { 2763 | -o-transform-origin: left bottom; 2764 | -o-transform: rotate(-90deg); 2765 | opacity: 0; 2766 | } 2767 | } 2768 | 2769 | @keyframes rotateOutUpLeft { 2770 | 0% { 2771 | transform-origin: left bottom; 2772 | transform: rotate(0); 2773 | opacity: 1; 2774 | } 2775 | 2776 | 100% { 2777 | transform-origin: left bottom; 2778 | transform: rotate(-90deg); 2779 | opacity: 0; 2780 | } 2781 | } 2782 | 2783 | .rotateOutUpLeft { 2784 | -webkit-animation-name: rotateOutUpLeft; 2785 | -moz-animation-name: rotateOutUpLeft; 2786 | -o-animation-name: rotateOutUpLeft; 2787 | animation-name: rotateOutUpLeft; 2788 | } 2789 | @-webkit-keyframes rotateOutDownLeft { 2790 | 0% { 2791 | -webkit-transform-origin: left bottom; 2792 | -webkit-transform: rotate(0); 2793 | opacity: 1; 2794 | } 2795 | 2796 | 100% { 2797 | -webkit-transform-origin: left bottom; 2798 | -webkit-transform: rotate(90deg); 2799 | opacity: 0; 2800 | } 2801 | } 2802 | 2803 | @-moz-keyframes rotateOutDownLeft { 2804 | 0% { 2805 | -moz-transform-origin: left bottom; 2806 | -moz-transform: rotate(0); 2807 | opacity: 1; 2808 | } 2809 | 2810 | 100% { 2811 | -moz-transform-origin: left bottom; 2812 | -moz-transform: rotate(90deg); 2813 | opacity: 0; 2814 | } 2815 | } 2816 | 2817 | @-o-keyframes rotateOutDownLeft { 2818 | 0% { 2819 | -o-transform-origin: left bottom; 2820 | -o-transform: rotate(0); 2821 | opacity: 1; 2822 | } 2823 | 2824 | 100% { 2825 | -o-transform-origin: left bottom; 2826 | -o-transform: rotate(90deg); 2827 | opacity: 0; 2828 | } 2829 | } 2830 | 2831 | @keyframes rotateOutDownLeft { 2832 | 0% { 2833 | transform-origin: left bottom; 2834 | transform: rotate(0); 2835 | opacity: 1; 2836 | } 2837 | 2838 | 100% { 2839 | transform-origin: left bottom; 2840 | transform: rotate(90deg); 2841 | opacity: 0; 2842 | } 2843 | } 2844 | 2845 | .rotateOutDownLeft { 2846 | -webkit-animation-name: rotateOutDownLeft; 2847 | -moz-animation-name: rotateOutDownLeft; 2848 | -o-animation-name: rotateOutDownLeft; 2849 | animation-name: rotateOutDownLeft; 2850 | } 2851 | @-webkit-keyframes rotateOutUpRight { 2852 | 0% { 2853 | -webkit-transform-origin: right bottom; 2854 | -webkit-transform: rotate(0); 2855 | opacity: 1; 2856 | } 2857 | 2858 | 100% { 2859 | -webkit-transform-origin: right bottom; 2860 | -webkit-transform: rotate(90deg); 2861 | opacity: 0; 2862 | } 2863 | } 2864 | 2865 | @-moz-keyframes rotateOutUpRight { 2866 | 0% { 2867 | -moz-transform-origin: right bottom; 2868 | -moz-transform: rotate(0); 2869 | opacity: 1; 2870 | } 2871 | 2872 | 100% { 2873 | -moz-transform-origin: right bottom; 2874 | -moz-transform: rotate(90deg); 2875 | opacity: 0; 2876 | } 2877 | } 2878 | 2879 | @-o-keyframes rotateOutUpRight { 2880 | 0% { 2881 | -o-transform-origin: right bottom; 2882 | -o-transform: rotate(0); 2883 | opacity: 1; 2884 | } 2885 | 2886 | 100% { 2887 | -o-transform-origin: right bottom; 2888 | -o-transform: rotate(90deg); 2889 | opacity: 0; 2890 | } 2891 | } 2892 | 2893 | @keyframes rotateOutUpRight { 2894 | 0% { 2895 | transform-origin: right bottom; 2896 | transform: rotate(0); 2897 | opacity: 1; 2898 | } 2899 | 2900 | 100% { 2901 | transform-origin: right bottom; 2902 | transform: rotate(90deg); 2903 | opacity: 0; 2904 | } 2905 | } 2906 | 2907 | .rotateOutUpRight { 2908 | -webkit-animation-name: rotateOutUpRight; 2909 | -moz-animation-name: rotateOutUpRight; 2910 | -o-animation-name: rotateOutUpRight; 2911 | animation-name: rotateOutUpRight; 2912 | } 2913 | @-webkit-keyframes rotateOutDownRight { 2914 | 0% { 2915 | -webkit-transform-origin: right bottom; 2916 | -webkit-transform: rotate(0); 2917 | opacity: 1; 2918 | } 2919 | 2920 | 100% { 2921 | -webkit-transform-origin: right bottom; 2922 | -webkit-transform: rotate(-90deg); 2923 | opacity: 0; 2924 | } 2925 | } 2926 | 2927 | @-moz-keyframes rotateOutDownRight { 2928 | 0% { 2929 | -moz-transform-origin: right bottom; 2930 | -moz-transform: rotate(0); 2931 | opacity: 1; 2932 | } 2933 | 2934 | 100% { 2935 | -moz-transform-origin: right bottom; 2936 | -moz-transform: rotate(-90deg); 2937 | opacity: 0; 2938 | } 2939 | } 2940 | 2941 | @-o-keyframes rotateOutDownRight { 2942 | 0% { 2943 | -o-transform-origin: right bottom; 2944 | -o-transform: rotate(0); 2945 | opacity: 1; 2946 | } 2947 | 2948 | 100% { 2949 | -o-transform-origin: right bottom; 2950 | -o-transform: rotate(-90deg); 2951 | opacity: 0; 2952 | } 2953 | } 2954 | 2955 | @keyframes rotateOutDownRight { 2956 | 0% { 2957 | transform-origin: right bottom; 2958 | transform: rotate(0); 2959 | opacity: 1; 2960 | } 2961 | 2962 | 100% { 2963 | transform-origin: right bottom; 2964 | transform: rotate(-90deg); 2965 | opacity: 0; 2966 | } 2967 | } 2968 | 2969 | .rotateOutDownRight { 2970 | -webkit-animation-name: rotateOutDownRight; 2971 | -moz-animation-name: rotateOutDownRight; 2972 | -o-animation-name: rotateOutDownRight; 2973 | animation-name: rotateOutDownRight; 2974 | } 2975 | @-webkit-keyframes hinge { 2976 | 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 2977 | 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 2978 | 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 2979 | 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 2980 | 100% { -webkit-transform: translateY(700px); opacity: 0; } 2981 | } 2982 | 2983 | @-moz-keyframes hinge { 2984 | 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 2985 | 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 2986 | 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 2987 | 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 2988 | 100% { -moz-transform: translateY(700px); opacity: 0; } 2989 | } 2990 | 2991 | @-o-keyframes hinge { 2992 | 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 2993 | 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 2994 | 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 2995 | 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 2996 | 100% { -o-transform: translateY(700px); opacity: 0; } 2997 | } 2998 | 2999 | @keyframes hinge { 3000 | 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 3001 | 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 3002 | 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 3003 | 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 3004 | 100% { transform: translateY(700px); opacity: 0; } 3005 | } 3006 | 3007 | .hinge { 3008 | -webkit-animation-name: hinge; 3009 | -moz-animation-name: hinge; 3010 | -o-animation-name: hinge; 3011 | animation-name: hinge; 3012 | } 3013 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 3014 | 3015 | @-webkit-keyframes rollIn { 3016 | 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 3017 | 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } 3018 | } 3019 | 3020 | @-moz-keyframes rollIn { 3021 | 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } 3022 | 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } 3023 | } 3024 | 3025 | @-o-keyframes rollIn { 3026 | 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } 3027 | 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } 3028 | } 3029 | 3030 | @keyframes rollIn { 3031 | 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 3032 | 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } 3033 | } 3034 | 3035 | .rollIn { 3036 | -webkit-animation-name: rollIn; 3037 | -moz-animation-name: rollIn; 3038 | -o-animation-name: rollIn; 3039 | animation-name: rollIn; 3040 | } 3041 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 3042 | 3043 | @-webkit-keyframes rollOut { 3044 | 0% { 3045 | opacity: 1; 3046 | -webkit-transform: translateX(0px) rotate(0deg); 3047 | } 3048 | 3049 | 100% { 3050 | opacity: 0; 3051 | -webkit-transform: translateX(100%) rotate(120deg); 3052 | } 3053 | } 3054 | 3055 | @-moz-keyframes rollOut { 3056 | 0% { 3057 | opacity: 1; 3058 | -moz-transform: translateX(0px) rotate(0deg); 3059 | } 3060 | 3061 | 100% { 3062 | opacity: 0; 3063 | -moz-transform: translateX(100%) rotate(120deg); 3064 | } 3065 | } 3066 | 3067 | @-o-keyframes rollOut { 3068 | 0% { 3069 | opacity: 1; 3070 | -o-transform: translateX(0px) rotate(0deg); 3071 | } 3072 | 3073 | 100% { 3074 | opacity: 0; 3075 | -o-transform: translateX(100%) rotate(120deg); 3076 | } 3077 | } 3078 | 3079 | @keyframes rollOut { 3080 | 0% { 3081 | opacity: 1; 3082 | transform: translateX(0px) rotate(0deg); 3083 | } 3084 | 3085 | 100% { 3086 | opacity: 0; 3087 | transform: translateX(100%) rotate(120deg); 3088 | } 3089 | } 3090 | 3091 | .rollOut { 3092 | -webkit-animation-name: rollOut; 3093 | -moz-animation-name: rollOut; 3094 | -o-animation-name: rollOut; 3095 | animation-name: rollOut; 3096 | } 3097 | 3098 | /* originally authored by Angelo Rohit - https://github.com/angelorohit */ 3099 | 3100 | @-webkit-keyframes lightSpeedIn { 3101 | 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 3102 | 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } 3103 | 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 3104 | 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 3105 | } 3106 | 3107 | @-moz-keyframes lightSpeedIn { 3108 | 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } 3109 | 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } 3110 | 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } 3111 | 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } 3112 | } 3113 | 3114 | @-o-keyframes lightSpeedIn { 3115 | 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } 3116 | 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } 3117 | 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } 3118 | 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } 3119 | } 3120 | 3121 | @keyframes lightSpeedIn { 3122 | 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 3123 | 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } 3124 | 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 3125 | 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } 3126 | } 3127 | 3128 | .lightSpeedIn { 3129 | -webkit-animation-name: lightSpeedIn; 3130 | -moz-animation-name: lightSpeedIn; 3131 | -o-animation-name: lightSpeedIn; 3132 | animation-name: lightSpeedIn; 3133 | 3134 | -webkit-animation-timing-function: ease-out; 3135 | -moz-animation-timing-function: ease-out; 3136 | -o-animation-timing-function: ease-out; 3137 | animation-timing-function: ease-out; 3138 | } 3139 | 3140 | .animated.lightSpeedIn { 3141 | -webkit-animation-duration: 0.5s; 3142 | -moz-animation-duration: 0.5s; 3143 | -o-animation-duration: 0.5s; 3144 | animation-duration: 0.5s; 3145 | } 3146 | 3147 | /* originally authored by Angelo Rohit - https://github.com/angelorohit */ 3148 | 3149 | @-webkit-keyframes lightSpeedOut { 3150 | 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 3151 | 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 3152 | } 3153 | 3154 | @-moz-keyframes lightSpeedOut { 3155 | 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } 3156 | 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } 3157 | } 3158 | 3159 | @-o-keyframes lightSpeedOut { 3160 | 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } 3161 | 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } 3162 | } 3163 | 3164 | @keyframes lightSpeedOut { 3165 | 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 3166 | 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 3167 | } 3168 | 3169 | .lightSpeedOut { 3170 | -webkit-animation-name: lightSpeedOut; 3171 | -moz-animation-name: lightSpeedOut; 3172 | -o-animation-name: lightSpeedOut; 3173 | animation-name: lightSpeedOut; 3174 | 3175 | -webkit-animation-timing-function: ease-in; 3176 | -moz-animation-timing-function: ease-in; 3177 | -o-animation-timing-function: ease-in; 3178 | animation-timing-function: ease-in; 3179 | } 3180 | 3181 | .animated.lightSpeedOut { 3182 | -webkit-animation-duration: 0.25s; 3183 | -moz-animation-duration: 0.25s; 3184 | -o-animation-duration: 0.25s; 3185 | animation-duration: 0.25s; 3186 | } 3187 | 3188 | /* originally authored by Angelo Rohit - https://github.com/angelorohit */ 3189 | 3190 | @-webkit-keyframes wiggle { 3191 | 0% { -webkit-transform: skewX(9deg); } 3192 | 10% { -webkit-transform: skewX(-8deg); } 3193 | 20% { -webkit-transform: skewX(7deg); } 3194 | 30% { -webkit-transform: skewX(-6deg); } 3195 | 40% { -webkit-transform: skewX(5deg); } 3196 | 50% { -webkit-transform: skewX(-4deg); } 3197 | 60% { -webkit-transform: skewX(3deg); } 3198 | 70% { -webkit-transform: skewX(-2deg); } 3199 | 80% { -webkit-transform: skewX(1deg); } 3200 | 90% { -webkit-transform: skewX(0deg); } 3201 | 100% { -webkit-transform: skewX(0deg); } 3202 | } 3203 | 3204 | @-moz-keyframes wiggle { 3205 | 0% { -moz-transform: skewX(9deg); } 3206 | 10% { -moz-transform: skewX(-8deg); } 3207 | 20% { -moz-transform: skewX(7deg); } 3208 | 30% { -moz-transform: skewX(-6deg); } 3209 | 40% { -moz-transform: skewX(5deg); } 3210 | 50% { -moz-transform: skewX(-4deg); } 3211 | 60% { -moz-transform: skewX(3deg); } 3212 | 70% { -moz-transform: skewX(-2deg); } 3213 | 80% { -moz-transform: skewX(1deg); } 3214 | 90% { -moz-transform: skewX(0deg); } 3215 | 100% { -moz-transform: skewX(0deg); } 3216 | } 3217 | 3218 | @-o-keyframes wiggle { 3219 | 0% { -o-transform: skewX(9deg); } 3220 | 10% { -o-transform: skewX(-8deg); } 3221 | 20% { -o-transform: skewX(7deg); } 3222 | 30% { -o-transform: skewX(-6deg); } 3223 | 40% { -o-transform: skewX(5deg); } 3224 | 50% { -o-transform: skewX(-4deg); } 3225 | 60% { -o-transform: skewX(3deg); } 3226 | 70% { -o-transform: skewX(-2deg); } 3227 | 80% { -o-transform: skewX(1deg); } 3228 | 90% { -o-transform: skewX(0deg); } 3229 | 100% { -o-transform: skewX(0deg); } 3230 | } 3231 | 3232 | @keyframes wiggle { 3233 | 0% { transform: skewX(9deg); } 3234 | 10% { transform: skewX(-8deg); } 3235 | 20% { transform: skewX(7deg); } 3236 | 30% { transform: skewX(-6deg); } 3237 | 40% { transform: skewX(5deg); } 3238 | 50% { transform: skewX(-4deg); } 3239 | 60% { transform: skewX(3deg); } 3240 | 70% { transform: skewX(-2deg); } 3241 | 80% { transform: skewX(1deg); } 3242 | 90% { transform: skewX(0deg); } 3243 | 100% { transform: skewX(0deg); } 3244 | } 3245 | 3246 | .wiggle { 3247 | -webkit-animation-name: wiggle; 3248 | -moz-animation-name: wiggle; 3249 | -o-animation-name: wiggle; 3250 | animation-name: wiggle; 3251 | 3252 | -webkit-animation-timing-function: ease-in; 3253 | -moz-animation-timing-function: ease-in; 3254 | -o-animation-timing-function: ease-in; 3255 | animation-timing-function: ease-in; 3256 | } 3257 | 3258 | .animated.wiggle { 3259 | -webkit-animation-duration: 0.75s; 3260 | -moz-animation-duration: 0.75s; 3261 | -o-animation-duration: 0.75s; 3262 | animation-duration: 0.75s; 3263 | } --------------------------------------------------------------------------------