├── README.md
├── backend-database
    └── serverless.yml
├── backend-restapi
    ├── index.js
    ├── package-lock.json
    ├── package.json
    ├── serverless.test.yml
    └── serverless.yml
├── backend-tasks
    ├── handler.js
    ├── package-lock.json
    ├── package.json
    └── serverless.yml
└── frontend
    ├── package-lock.json
    ├── package.json
    ├── public
        ├── favicon.ico
        ├── index.html
        └── manifest.json
    ├── serverless.yml
    └── src
        ├── DemoApp.css
        ├── DemoApp.js
        ├── images
            └── logo.png
        ├── index.css
        └── index.js


/README.md:
--------------------------------------------------------------------------------
  1 | # Serverless Framework - Workshop
  2 | 
  3 | This includes a full-stack example application as well as a walkthrough, to help others learn how to *build*, *test* and *monitor* apps with the Serverless Framework.
  4 | 
  5 | You will be building a landing page with an email submission form:
  6 | 
  7 | ![Example Preview](https://s3.amazonaws.com/assets.github.serverless/workshop/serverless-framework-workshop-example.png)
  8 | 
  9 | The landing page also has a Utility Panel, which contains ways to call your API, cause it to behave strangely, or even crash it.  The purpose of this is to fill the [Serverless Framework Dashboard](https://dashboard.serverless.com) with data and alerts, for demonstration purposes:
 10 | 
 11 | ![Example Preview 2](https://s3.amazonaws.com/assets.github.serverless/workshop/serverless-framework-workshop-example-utils.png)
 12 | 
 13 | <br/>
 14 | 
 15 | ## Prerequisites
 16 | 
 17 | These are the items you will need for the Workshop.
 18 | 
 19 | * **Amazon Web Services Accounts –** Each developer must have their own AWS account which they can freely deploy into and treat as a general sandbox.  Sharing accounts can and most often will result in collision of infrastructure resource names as well as API throttle limits on provisioning of infrastructure resources.  Every workshop we've ever done where the participants shared accounts has resulted in those problems mentioned, so please ensure your developers can have their own accounts, so we can focus our time on building and operating serverless applications.  (Keep in mind these developer accounts are for sandbox use only. In the workshop, we will discuss how to control and govern access to the AWS accounts that run your mission critical infrastructure and environments.)  Sign up for an AWS account here: https://aws.amazon.com/
 20 | 
 21 | * **Amazon Web Services Account Credentials** – Each developer must have Access Keys to their own AWS account with Admin Access.  These Access Keys must be saved on the developer's machine.  The Serverless Framework will use these to provision resources on the account.  You can learn how to create these Access Keys here: https://serverless.com/framework/docs/providers/aws/guide/credentials/
 22 | 
 23 | * **Node.js** – Each developer must have the current LTS version of Node.js installed on their machine. You can find it here:  https://nodejs.org/en/download/
 24 | 
 25 | * **Serverless Framework** – Each developer must have the current LTS version of Node.js installed on their machine. You can learn how to install the Serverless Framework here:  https://serverless.com/framework/docs/providers/aws/guide/installation/
 26 | 
 27 | <br/>
 28 | 
 29 | ## Setup
 30 | 
 31 | Clone this repository
 32 | 
 33 | ```text
 34 | $ git clone https://www.github.com/serverless/workshop
 35 | ```
 36 | 
 37 | In the repository, there are a few folders, each containing part of a serverless fullstack application demo.
 38 | 
 39 | The demo use-case is a simple form for collecting and saving email signups.  The demo includes a frontend built with React (via Create React App), a REST API containing 1 endpoint built on AWS Lambda and AWS Cloudfront, a DynamoDB database table, as well as a scheduled task.
 40 | 
 41 | The frontend also includes a "Demo Utilities" panel which includes a way to send multiple requests to the backend as well as different buttons that will crash the backend, cause it to timeout, cause it to run for an unusually long duration.  The purpose of these is to fill the Serverless Dashboard with data on invocations and errors, as well as to see how the Framework's auto-alerting features work.
 42 | 
 43 | **Note:** The `backend-tasks` directory containing the scheduled task is an optional part.  It contains an AWS Lambda that runs on a function and calls your back-end every 5 minutes, and once a day causes the function to generate different errors and alerts so you can see what they look like in the Serverless Dashboard.
 44 | 
 45 | ---
 46 | 
 47 | In `/backend-restapi` install npm dependencies.
 48 | 
 49 | ```text
 50 | $ npm i
 51 | ```
 52 | 
 53 | ---
 54 | 
 55 | In `/frontend` install npm dependencies.
 56 | 
 57 | ```text
 58 | $ npm i
 59 | ```
 60 | 
 61 | ---
 62 | 
 63 | The front-end application is a React application.  Run `npm run build` to build the front-end application so that it's ready to deploy.
 64 | 
 65 | ```text
 66 | $ npm run build
 67 | ```
 68 | 
 69 | The front-end application is a React application.  Run `npm run start` to run the front-end application locally.
 70 | 
 71 | ```text
 72 | $ npm run start
 73 | ```
 74 | 
 75 | ---
 76 | 
 77 | In `/frontend` run `login`
 78 | 
 79 | ```text
 80 | $ serverless login
 81 | ```
 82 | 
 83 | Login or register for Serverless Framework.  Verify your email if you are just signing up for the first time.
 84 | 
 85 | Make sure you create a `tenant` and then an `app`.
 86 | 
 87 | ---
 88 | 
 89 | In `/database/serverless.yml`, `/backend-restapi/serverless.yml` & `/frontend/serverless.yml` change the following...
 90 | 
 91 | ```yaml
 92 | tenant: mytenant # Put your Tenant name here from your Serverless Framework Enterprise account.
 93 | app: myapp # put your App name here from your Serverless Framework Enterprise account.
 94 | service: myservice # Customize your Service name
 95 | ```
 96 | 
 97 | In `/frontend/serverless.yml` change the bucket name to be universally unique, since all AWS S3 buckets must have unique names.
 98 | 
 99 | ```yaml
100 | custom:
101 |   client:
102 |     bucketName: myWebsiteBucket # put a universally unique bucket name here
103 | ```
104 | 
105 | <br/>
106 | 
107 | ## Deployment
108 | 
109 | Note: You may need to login twice if you registered for the first time and just verified your email address.
110 | 
111 | In `/database` run `deploy` to deploy the backend database.
112 | 
113 | ```text
114 | $ serverless deploy
115 | ```
116 | 
117 | You will need to deploy this first in order for the outputs to be available to `backend-restapi`.
118 | ---
119 | 
120 | In `/backend-api` run `deploy` to deploy the backend code.
121 | 
122 | ```text
123 | $ serverless deploy
124 | ```
125 | 
126 | Copy the URL of the function that is listed after successful deploy.
127 | 
128 | ---
129 | 
130 | In `/frontend` run `deploy` to deploy the frontend service to Serverless Framework.
131 | 
132 | ```text
133 | $ serverless deploy
134 | ```
135 | 
136 | ---
137 | 
138 | In `/frontend` run `client deploy` to deploy the website via the [Serverless Finch Plugin](https://github.com/fernando-mc/serverless-finch).   Make sure you ran the build command first, in the step above.
139 | 
140 | ```text
141 | $ serverless client deploy
142 | ```
143 | 
144 | After you deploy the front-end, go to the live website URL which is returned to you after you deploy with `serverless-finch`, click on `Demo Utilities` and add the API URL in the side panel.  This is given to you after successful deploy of the `/functions` Service.  Run `serverless info` in the `/functions` Service to see your API endpoint at any time.
145 | 
146 | ---
147 | 
148 | **See Everything In The Dashboard**
149 | 
150 | View everything that was just deployed in the dashboard - https://dashboard.serverless.com
151 | 
152 | Test the application by entering some information into the submission form.  Review the Developer Tools and inspect the Network request.
153 | 
154 | Check out the Serverless Framework Dashboard to see the invocation.  The Dashboard link should appear in your `/backend-restapi` Service after deployment.  Or, just go to [https://dashboard.serverless.com](https://dashboard.serverless.com)
155 | 
156 | <br/>
157 | 
158 | ## Development
159 | 
160 | In `/backend-restapi`, check to see what has been deployed.
161 | 
162 | ```text
163 | $ sls info
164 | ```
165 | 
166 | ---
167 | 
168 | Here are some handy ways to develop and test your Serverless Application.
169 | 
170 | In `/backend-restapi`, invoke the live function via this command:
171 | 
172 | ```text
173 | $ sls invoke -f formSubmit --data '{"body":{"name":"jeff","email":"jeff@lebowski"}}'
174 | ```
175 | 
176 | ---
177 | 
178 | In `/backend-restapi`, invoke the function locally.
179 | 
180 | ```text
181 | $ sls invoke local -f formSubmit --data '{"body":{"name":"jeff2","email":"jeff@lebowski2"}}'
182 | ```
183 | 
184 | ---
185 | 
186 | In `/backend-restapi`, add a log statement to the beginning of your function.
187 | 
188 | ```javascript
189 | console.log('hello world')
190 | ```
191 | 
192 | Then run this command to deploy only your function and not trigger a CloudFormation update.  This is a much faster way to deploy.
193 | 
194 | ```text
195 | $ sls deploy function -f formSubmit
196 | ```
197 | 
198 | ---
199 | 
200 | In `/backend-restapi`, invoke the live function, but also pass in the logs flag.
201 | 
202 | ```text
203 | $ sls invoke -f formSubmit --data '{"body":{"name":"jeff3","email":"jeff@lebowski3"}}' -l
204 | ```
205 | 
206 | You should see the logs from Cloudwatch come with the response.
207 | 
208 | ---
209 | 
210 | In `/backend-restapi`, open up a new CLI session and run this command to stream logs into your CLI.
211 | 
212 | ```text
213 | $ sls logs -f formSubmit -t
214 | ```
215 | 
216 | Call the function again to see logs stream in:
217 | 
218 | ```text
219 | $ sls invoke -f formSubmit --data '{"body":{"name":"jeff4","email":"jeff@lebowski4"}}' -l
220 | ```
221 | 
222 | The logs should stream in.
223 | 
224 | ---
225 | 
226 | In `/backend-restapi`, remove the log statement and run a full deploy again.
227 | 
228 | ```text
229 | $ sls deploy --force
230 | ```
231 | 
232 | (Use `--force` in case it tries to skip deployment because it hasn't detected a change.)
233 | 
234 | ---
235 | 
236 | In `/backend-restapi`, list recent deployments.
237 | 
238 | ```text
239 | $ sls deploy list
240 | ```
241 | 
242 | Timestamps are used to identify deployments.  The Framework saves old CloudFormation templates for you.  You can use them to rollback.  This is great if you get into trouble.
243 | 
244 | Alternatively, you can also see recent deployments in the Serverless Dashboard.
245 | 
246 | ```text
247 | $ sls rollback -t 1476790110568
248 | ```
249 | 
250 | <br/>
251 | 
252 | ## Operations
253 | 
254 | ### Deployment Difference
255 | 
256 | Add `environment` variable `foo:bar` in serverless.yml and redeploy.  Review the change in the deployment record in the dashboard.
257 | 
258 | See the dashed lines on the charts in the Dashboard indicating deployments.
259 | 
260 | ### Multiple Requests
261 | 
262 | Use the Demo Utils to send multiple requests.
263 | 
264 | See them in the Dashboard.
265 | 
266 | ### Charts: Invocations & Errors
267 | 
268 | Click on the invocations and errors charts
269 | 
270 | ### Alert: Generate A Function Error
271 | 
272 | ### Alert: Approaching Timeout Error
273 | 
274 | ### Alert: Timeout Error
275 | 
276 | ### Alert: Unusual Error Rate
277 | 
278 | ### Invocation Explorer
279 | 
280 | <br/>
281 | 
282 | ## Stage Setup
283 | 
284 | ### Profile
285 | 
286 | Within Serverless Framework Enterprise, you can set Stages for each Application, which all of its Services can use.
287 | 
288 | In each Stage, you can set Secrets (sensitive information, like keys), Safeguards (policies) and Notification settings for all Services.
289 | 
290 | In (https://dashboard.serverless.com)[https://dashboard.serverless.com], create a `dev`, `qa` and `prod` Stage in your Application.
291 | 
292 | ---
293 | 
294 | In (https://dashboard.serverless.com)[https://dashboard.serverless.com], create a Profile for development called `profile-dev` and associate it with your Application's `dev` stage.
295 | 
296 | ---
297 | 
298 | ### Secrets
299 | 
300 | In (https://dashboard.serverless.com)[https://dashboard.serverless.com], go to your Profile for development called `profile-dev` and create a Secret called `foo`.
301 | 
302 | In `/backend-restapi`, put the Secret in the environment variables of the `formSubmit` functions, like this:
303 | 
304 | ```yaml
305 | provider:
306 |   name: aws
307 |   runtime: nodejs8.10
308 |   region: us-east-1
309 |   environment:
310 |     foo: ${secret:foo}
311 | ```
312 | 
313 | This changes across stages automatically.  Deploy this.
314 | 
315 | View the deployment record in Serverless Framework.
316 | 
317 | ### Notifications
318 | 
319 | ---
320 | 
321 | In (https://dashboard.serverless.com)[https://dashboard.serverless.com], go to your Profile for development called `profile-dev` and add a Safeguard for `allowed-regions`
322 | 
323 | In `/backend-restapi`, run a full deployment and look at the Safegaurds outputs.
324 | 
325 | ---
326 | 
327 | ### Safeguards
328 | 
329 | 
330 | # Q&A
331 | 
332 | 
333 | 
334 | 
335 | 
336 | 
337 | 
338 | 
339 | 
340 | 
341 | 
342 | 
343 | 
344 | 
345 | 
346 | <br/>
347 | 
348 | ## Testing
349 | 
350 | In `/backend-restapi`, run the test command.
351 | 
352 | ```text
353 | $ sls test
354 | ```
355 | 
356 | This uses `serverless.test.yml` to test the live cloud deployment and should return a successful response.
357 | 
358 | ---
359 | 
360 | Here is what a common configuration of Serverless Framework looks like in CI/CD.  Source is here:  (CI/CD Workflow For Serverless Apps with CircleCI)[https://serverless.com/blog/ci-cd-workflow-serverless-apps-with-circleci/]
361 | 
362 | ```yaml
363 | jobs:
364 |   build:
365 |     ...
366 | 
367 |     steps:
368 |       - checkout
369 | 
370 |       # Download and cache dependencies
371 |       - restore_cache:
372 |           keys:
373 |             - dependencies-cache-{{ checksum "package.json" }}
374 |             # fallback to using the latest cache if no exact match is found
375 |             - dependencies-cache
376 | 
377 |       - run:
378 |           name: Install Serverless CLI and dependencies
379 |           command: |
380 |             sudo npm i -g serverless
381 |             npm install
382 | 
383 |       - run:
384 |           name: Run tests with code coverage
385 |           command: npm test --coverage
386 | 
387 |       - run:
388 |           name: Deploy application
389 |           command: sls deploy -v --stage qa # Add stage and -v flag to show CloudFormation activity
390 | 
391 |       - run:
392 |           name: Deploy application
393 |           command: sls test
394 | 
395 |       - save_cache:
396 |           paths:
397 |             - node_modules
398 |           key: dependencies-cache-{{ checksum "package.json" }}
399 | ```
400 | 


--------------------------------------------------------------------------------
/backend-database/serverless.yml:
--------------------------------------------------------------------------------
 1 | org: ac360 # Enter your tenant name here
 2 | app: demos # Enter your application name here
 3 | service: fullstack-database
 4 | 
 5 | provider:
 6 |   name: aws
 7 |   region: us-east-1
 8 | 
 9 | custom: # Centralize variables here
10 |   stage: ${opt:stage, self:provider.stage}
11 |   database_submissions_name: submissions-${self:custom.stage}
12 |   database_submissions_region: submissions-${self:provider.region}
13 | 
14 | resources:
15 |   Resources:
16 |     Submissions:
17 |       Type: 'AWS::DynamoDB::Table'
18 |       DeletionPolicy: Retain
19 |       Properties:
20 |         AttributeDefinitions:
21 |           - AttributeName: email
22 |             AttributeType: S
23 |         KeySchema:
24 |           - AttributeName: email
25 |             KeyType: HASH
26 |         ProvisionedThroughput:
27 |           ReadCapacityUnits: 1
28 |           WriteCapacityUnits: 1
29 |         TableName: ${self:custom.database_submissions_name}
30 | 
31 | outputs:
32 |   database_submissions_name: ${self:custom.database_submissions_name}
33 |   database_submissions_region: ${self:custom.database_submissions_region}
34 | 


--------------------------------------------------------------------------------
/backend-restapi/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Form Submit
  3 |  */
  4 | 
  5 | const AWS = require('aws-sdk')
  6 | const dynamoDb = new AWS.DynamoDB.DocumentClient()
  7 | 
  8 | const submit = async (event, context) => {
  9 | 
 10 |   // If this query param is submitted, the function crashes...
 11 |   if (event && event['queryStringParameters'] && event['queryStringParameters']['error']) {
 12 |     crash()
 13 |   }
 14 | 
 15 |   // If this query param is submitted, the function runs for an unusually long time...
 16 |   if (event && event['queryStringParameters'] && event['queryStringParameters']['duration']) {
 17 |     await sleep(5800)
 18 |   }
 19 | 
 20 |   // If this query param is submitted, the function times out
 21 |   if (event && event['queryStringParameters'] && event['queryStringParameters']['timeout']) {
 22 |     await sleep(20000)
 23 |   }
 24 | 
 25 |   // Set default event body
 26 |   let data = event && event.body ? event.body : null
 27 |   // Parse, if necessary
 28 |   data = typeof data === 'string' ? JSON.parse(data) : data
 29 | 
 30 |   console.log(data)
 31 | 
 32 |   // If no data, throw an error
 33 |   if (!data ||
 34 |     typeof data !== 'object' ||
 35 |     !data.email ||
 36 |     !data.name) {
 37 |     console.error('Data not included in response body.')
 38 |     return {
 39 |       statusCode: 400,
 40 |       headers: {
 41 |         'Access-Control-Allow-Origin': '*',
 42 |         'Access-Control-Allow-Credentials': true,
 43 |       },
 44 |       body: JSON.stringify({
 45 |         message: 'Email address is required'
 46 |       }),
 47 |     }
 48 |   }
 49 | 
 50 |   // If no database, throw an error
 51 |   if (!process.env.database_submissions_name) {
 52 |     console.error('Database not found.')
 53 |     return {
 54 |       statusCode: 500,
 55 |       headers: {
 56 |         'Access-Control-Allow-Origin': '*',
 57 |         'Access-Control-Allow-Credentials': true,
 58 |       },
 59 |       body: JSON.stringify({
 60 |         message: 'Database not found'
 61 |       }),
 62 |     }
 63 |   }
 64 | 
 65 |   const params = {
 66 |     TableName: process.env.database_submissions_name,
 67 |     Item: {
 68 |       email: data.email,
 69 |       name: data.name,
 70 |       createdAt: new Date().getTime(),
 71 |       updatedAt: new Date().getTime(),
 72 |     },
 73 |   }
 74 | 
 75 |   let result
 76 |   try {
 77 |     result = await dynamoDb.put(params).promise()
 78 |   } catch(error) {
 79 |     console.error('DyanmoDB PUT error' + error.message)
 80 |     return {
 81 |       statusCode: 500,
 82 |       headers: {
 83 |         'Access-Control-Allow-Origin': '*',
 84 |         'Access-Control-Allow-Credentials': true,
 85 |       },
 86 |       body: JSON.stringify({
 87 |         message: error.message
 88 |       })
 89 |     }
 90 |   }
 91 | 
 92 |   // Return the response
 93 |  return {
 94 |     statusCode: 200,
 95 |     headers: {
 96 |       'Access-Control-Allow-Origin': '*',
 97 |       'Access-Control-Allow-Credentials': true,
 98 |     },
 99 |     body: JSON.stringify({
100 |       message: 'success',
101 |       email: data.email,
102 |     }),
103 |   }
104 | }
105 | 
106 | module.exports = { submit }
107 | 
108 | /**
109 |  * Demo Utility Functions
110 |  */
111 | 
112 | const crash = () => {
113 |   let r = Math.random().toString(36).substring(7)
114 |   throw new Error(`Self-inflicted function crash: ${r}`)
115 | }
116 | 
117 | const sleep = (ms) => {
118 |   return new Promise(resolve => setTimeout(resolve, ms))
119 | }
120 | 


--------------------------------------------------------------------------------
/backend-restapi/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "fullstack-functions",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "aws-sdk": {
  8 |       "version": "2.475.0",
  9 |       "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.475.0.tgz",
 10 |       "integrity": "sha512-C8vRCYOrDxqlpx/HQUvIJteLwTllOQrGZBfGM6DuFBNmMJvkzoJi3MWKj1e+yWXkGzNmbOgpzyVLcKrXyntnTw==",
 11 |       "dev": true,
 12 |       "requires": {
 13 |         "buffer": "4.9.1",
 14 |         "events": "1.1.1",
 15 |         "ieee754": "1.1.8",
 16 |         "jmespath": "0.15.0",
 17 |         "querystring": "0.2.0",
 18 |         "sax": "1.2.1",
 19 |         "url": "0.10.3",
 20 |         "uuid": "3.3.2",
 21 |         "xml2js": "0.4.19"
 22 |       }
 23 |     },
 24 |     "base64-js": {
 25 |       "version": "1.3.0",
 26 |       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
 27 |       "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==",
 28 |       "dev": true
 29 |     },
 30 |     "buffer": {
 31 |       "version": "4.9.1",
 32 |       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
 33 |       "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
 34 |       "dev": true,
 35 |       "requires": {
 36 |         "base64-js": "^1.0.2",
 37 |         "ieee754": "^1.1.4",
 38 |         "isarray": "^1.0.0"
 39 |       }
 40 |     },
 41 |     "events": {
 42 |       "version": "1.1.1",
 43 |       "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
 44 |       "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=",
 45 |       "dev": true
 46 |     },
 47 |     "ieee754": {
 48 |       "version": "1.1.8",
 49 |       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.8.tgz",
 50 |       "integrity": "sha1-vjPUCsEO8ZJnAfbwii2G+/0a0+Q=",
 51 |       "dev": true
 52 |     },
 53 |     "isarray": {
 54 |       "version": "1.0.0",
 55 |       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
 56 |       "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
 57 |       "dev": true
 58 |     },
 59 |     "jmespath": {
 60 |       "version": "0.15.0",
 61 |       "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.15.0.tgz",
 62 |       "integrity": "sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=",
 63 |       "dev": true
 64 |     },
 65 |     "punycode": {
 66 |       "version": "1.3.2",
 67 |       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
 68 |       "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
 69 |       "dev": true
 70 |     },
 71 |     "querystring": {
 72 |       "version": "0.2.0",
 73 |       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
 74 |       "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
 75 |       "dev": true
 76 |     },
 77 |     "sax": {
 78 |       "version": "1.2.1",
 79 |       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
 80 |       "integrity": "sha1-e45lYZCyKOgaZq6nSEgNgozS03o=",
 81 |       "dev": true
 82 |     },
 83 |     "url": {
 84 |       "version": "0.10.3",
 85 |       "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
 86 |       "integrity": "sha1-Ah5NnHcF8hu/N9A861h2dAJ3TGQ=",
 87 |       "dev": true,
 88 |       "requires": {
 89 |         "punycode": "1.3.2",
 90 |         "querystring": "0.2.0"
 91 |       }
 92 |     },
 93 |     "uuid": {
 94 |       "version": "3.3.2",
 95 |       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
 96 |       "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
 97 |       "dev": true
 98 |     },
 99 |     "xml2js": {
100 |       "version": "0.4.19",
101 |       "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
102 |       "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
103 |       "dev": true,
104 |       "requires": {
105 |         "sax": ">=0.6.0",
106 |         "xmlbuilder": "~9.0.1"
107 |       }
108 |     },
109 |     "xmlbuilder": {
110 |       "version": "9.0.7",
111 |       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
112 |       "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=",
113 |       "dev": true
114 |     }
115 |   }
116 | }
117 | 


--------------------------------------------------------------------------------
/backend-restapi/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fullstack-functions",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {},
 7 |   "author": "Serverless.com",
 8 |   "license": "MIT",
 9 |   "dependencies": {},
10 |   "devDependencies": {
11 |     "aws-sdk": "^2.475.0"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/backend-restapi/serverless.test.yml:
--------------------------------------------------------------------------------
 1 | - name: form submission endpoint returns 200
 2 |   endpoint:
 3 |     function: formSubmit
 4 |   request:
 5 |     headers:
 6 |       Foo: bar
 7 |     body:
 8 |       email: jeff@lebowski.com
 9 |       name: Jeff Lebowski
10 |   response:
11 |     status: 200
12 |     body:
13 |       message: success
14 |       email: jeff@lebowski.com
15 | 


--------------------------------------------------------------------------------
/backend-restapi/serverless.yml:
--------------------------------------------------------------------------------
 1 | org: ac360 # Enter your tenant name here
 2 | app: demos # Enter your application name here
 3 | service: fullstack-restapi # update
 4 | 
 5 | provider:
 6 |   name: aws
 7 |   runtime: nodejs8.10
 8 |   region: us-east-1
 9 |   environment:
10 |     database_submissions_name: ${output::${param:env}::fullstack-database.database_submissions_name}
11 |     database_submissions_region: ${output::${param:env}::fullstack-database.database_submissions_region}
12 |   iamRoleStatements:
13 |     - Effect: Allow
14 |       Action:
15 |         - dynamodb:PutItem
16 |       Resource: "arn:aws:dynamodb:*:*:table/${output::${param:env}::fullstack-database.database_submissions_name}"
17 | 
18 | functions:
19 |   formSubmit:
20 |     handler: index.submit
21 |     timeout: 6
22 |     events:
23 |       - http:
24 |           path: submit
25 |           method: post
26 |           cors: true
27 | 
28 | resources:
29 | 


--------------------------------------------------------------------------------
/backend-tasks/handler.js:
--------------------------------------------------------------------------------
 1 | const moment = require('moment')
 2 | const fetch = require('node-fetch')
 3 | 
 4 | /*
 5 | * Test Endpoint
 6 | */
 7 | 
 8 | const testEndpoint = (event, context, callback) => {
 9 | 
10 |   let url = process.env.url
11 |   let format = 'hh:mm:ss'
12 |   let time = moment()
13 |   let beforeTime = moment('04:50:00', format)
14 |   let afterTime = moment('05:00:00', format)
15 | 
16 |   if (time.isBetween(beforeTime, afterTime)) {
17 |     url += `?error=true`
18 |   }
19 | 
20 |   // TODO: Add other query parameters to generate other function alerts.
21 |   console.log('Testing URL: ', url)
22 | 
23 |   // API Request Function
24 |   async function httpRequest() {
25 |     let res = await fetch(url, {
26 |       method: 'POST',
27 |       body: JSON.stringify({
28 |         name: 'Scheduled Request',
29 |         email: 'scheduled@request.com'
30 |       })
31 |     })
32 |     if (res.ok) {
33 |       return res
34 |     } else {
35 |       console.log(res.error)
36 |       throw new Error(res.statusText)
37 |     }
38 |   }
39 | 
40 |   // Generate a random number between 1 and 10
41 |   let x = Math.floor((Math.random() * 10) + 1)
42 |   let y = 0
43 | 
44 |   let promises = []
45 |   while (y < x) {
46 |     promises.push(httpRequest())
47 |     y++
48 |   }
49 | 
50 |   return Promise.all(promises)
51 |   .then(function(values) {
52 |     console.log(`Called the URL ${x} times successfully`)
53 |     return callback(null , 'success')
54 |   })
55 |   .catch((error) => {
56 |     console.log(error)
57 |     return callback(error, null)
58 |   })
59 | }
60 | 
61 | module.exports = {
62 |   testEndpoint,
63 | }
64 | 


--------------------------------------------------------------------------------
/backend-tasks/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "webapp-users",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 1,
  5 |   "requires": true,
  6 |   "dependencies": {
  7 |     "@babel/polyfill": {
  8 |       "version": "7.4.0",
  9 |       "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.4.0.tgz",
 10 |       "integrity": "sha512-bVsjsrtsDflIHp5I6caaAa2V25Kzn50HKPL6g3X0P0ni1ks+58cPB8Mz6AOKVuRPgaVdq/OwEUc/1vKqX+Mo4A==",
 11 |       "dev": true,
 12 |       "requires": {
 13 |         "core-js": "^2.6.5",
 14 |         "regenerator-runtime": "^0.13.2"
 15 |       }
 16 |     },
 17 |     "@serverless/enterprise-plugin": {
 18 |       "version": "0.3.1",
 19 |       "resolved": "https://registry.npmjs.org/@serverless/enterprise-plugin/-/enterprise-plugin-0.3.1.tgz",
 20 |       "integrity": "sha512-umtELkR3UB1MmUE/R+K14ZsS8rAJFsUVgLRY4c/SiPorZJxXWkBjQTpTflcB5Qxp5nNONlXIvjMaZZ+oMSZdwA==",
 21 |       "dev": true,
 22 |       "requires": {
 23 |         "@babel/polyfill": "^7.2.5",
 24 |         "@serverless/platform-sdk": "^0.7.0",
 25 |         "chalk": "^2.4.2",
 26 |         "flat": "^4.1.0",
 27 |         "fs-extra": "^7.0.1",
 28 |         "iso8601-duration": "^1.1.7",
 29 |         "lodash": "^4.17.11",
 30 |         "moment": "^2.24.0",
 31 |         "node-dir": "^0.1.17",
 32 |         "node-fetch": "^2.3.0",
 33 |         "semver": "^5.6.0",
 34 |         "yamljs": "^0.3.0"
 35 |       }
 36 |     },
 37 |     "@serverless/platform-sdk": {
 38 |       "version": "0.7.0",
 39 |       "resolved": "https://registry.npmjs.org/@serverless/platform-sdk/-/platform-sdk-0.7.0.tgz",
 40 |       "integrity": "sha512-3VuXTkWSmfoGXiql0v/5lMHOMfRtk01C81w0QinmSZKpO49f+9UgSwJvLK1LaVJmOTBZidr1vBI5SZHTNZW2WA==",
 41 |       "dev": true,
 42 |       "requires": {
 43 |         "babel-polyfill": "^6.26.0",
 44 |         "body-parser": "^1.18.3",
 45 |         "chalk": "^2.4.1",
 46 |         "cors": "^2.8.4",
 47 |         "express": "^4.16.3",
 48 |         "is-docker": "^1.1.0",
 49 |         "isomorphic-fetch": "^2.2.1",
 50 |         "jwt-decode": "^2.2.0",
 51 |         "opn": "^5.3.0",
 52 |         "querystring": "^0.2.0",
 53 |         "ramda": "^0.25.0",
 54 |         "rc": "^1.2.8",
 55 |         "source-map-support": "^0.5.5",
 56 |         "uuid": "^3.3.2",
 57 |         "write-file-atomic": "^2.3.0"
 58 |       }
 59 |     },
 60 |     "accepts": {
 61 |       "version": "1.3.5",
 62 |       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
 63 |       "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=",
 64 |       "dev": true,
 65 |       "requires": {
 66 |         "mime-types": "~2.1.18",
 67 |         "negotiator": "0.6.1"
 68 |       }
 69 |     },
 70 |     "ansi-styles": {
 71 |       "version": "3.2.1",
 72 |       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
 73 |       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
 74 |       "dev": true,
 75 |       "requires": {
 76 |         "color-convert": "^1.9.0"
 77 |       }
 78 |     },
 79 |     "argparse": {
 80 |       "version": "1.0.10",
 81 |       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
 82 |       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
 83 |       "dev": true,
 84 |       "requires": {
 85 |         "sprintf-js": "~1.0.2"
 86 |       }
 87 |     },
 88 |     "array-flatten": {
 89 |       "version": "1.1.1",
 90 |       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
 91 |       "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
 92 |       "dev": true
 93 |     },
 94 |     "babel-polyfill": {
 95 |       "version": "6.26.0",
 96 |       "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
 97 |       "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
 98 |       "dev": true,
 99 |       "requires": {
100 |         "babel-runtime": "^6.26.0",
101 |         "core-js": "^2.5.0",
102 |         "regenerator-runtime": "^0.10.5"
103 |       },
104 |       "dependencies": {
105 |         "regenerator-runtime": {
106 |           "version": "0.10.5",
107 |           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
108 |           "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=",
109 |           "dev": true
110 |         }
111 |       }
112 |     },
113 |     "babel-runtime": {
114 |       "version": "6.26.0",
115 |       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
116 |       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
117 |       "dev": true,
118 |       "requires": {
119 |         "core-js": "^2.4.0",
120 |         "regenerator-runtime": "^0.11.0"
121 |       },
122 |       "dependencies": {
123 |         "regenerator-runtime": {
124 |           "version": "0.11.1",
125 |           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
126 |           "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
127 |           "dev": true
128 |         }
129 |       }
130 |     },
131 |     "balanced-match": {
132 |       "version": "1.0.0",
133 |       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
134 |       "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
135 |       "dev": true
136 |     },
137 |     "body-parser": {
138 |       "version": "1.18.3",
139 |       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
140 |       "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=",
141 |       "dev": true,
142 |       "requires": {
143 |         "bytes": "3.0.0",
144 |         "content-type": "~1.0.4",
145 |         "debug": "2.6.9",
146 |         "depd": "~1.1.2",
147 |         "http-errors": "~1.6.3",
148 |         "iconv-lite": "0.4.23",
149 |         "on-finished": "~2.3.0",
150 |         "qs": "6.5.2",
151 |         "raw-body": "2.3.3",
152 |         "type-is": "~1.6.16"
153 |       }
154 |     },
155 |     "brace-expansion": {
156 |       "version": "1.1.11",
157 |       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
158 |       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
159 |       "dev": true,
160 |       "requires": {
161 |         "balanced-match": "^1.0.0",
162 |         "concat-map": "0.0.1"
163 |       }
164 |     },
165 |     "buffer-from": {
166 |       "version": "1.1.1",
167 |       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
168 |       "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
169 |       "dev": true
170 |     },
171 |     "bytes": {
172 |       "version": "3.0.0",
173 |       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
174 |       "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
175 |       "dev": true
176 |     },
177 |     "chalk": {
178 |       "version": "2.4.2",
179 |       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
180 |       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
181 |       "dev": true,
182 |       "requires": {
183 |         "ansi-styles": "^3.2.1",
184 |         "escape-string-regexp": "^1.0.5",
185 |         "supports-color": "^5.3.0"
186 |       }
187 |     },
188 |     "color-convert": {
189 |       "version": "1.9.3",
190 |       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
191 |       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
192 |       "dev": true,
193 |       "requires": {
194 |         "color-name": "1.1.3"
195 |       }
196 |     },
197 |     "color-name": {
198 |       "version": "1.1.3",
199 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
200 |       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
201 |       "dev": true
202 |     },
203 |     "concat-map": {
204 |       "version": "0.0.1",
205 |       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
206 |       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
207 |       "dev": true
208 |     },
209 |     "content-disposition": {
210 |       "version": "0.5.2",
211 |       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
212 |       "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=",
213 |       "dev": true
214 |     },
215 |     "content-type": {
216 |       "version": "1.0.4",
217 |       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
218 |       "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
219 |       "dev": true
220 |     },
221 |     "cookie": {
222 |       "version": "0.3.1",
223 |       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
224 |       "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=",
225 |       "dev": true
226 |     },
227 |     "cookie-signature": {
228 |       "version": "1.0.6",
229 |       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
230 |       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
231 |       "dev": true
232 |     },
233 |     "core-js": {
234 |       "version": "2.6.5",
235 |       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
236 |       "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==",
237 |       "dev": true
238 |     },
239 |     "cors": {
240 |       "version": "2.8.5",
241 |       "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
242 |       "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
243 |       "dev": true,
244 |       "requires": {
245 |         "object-assign": "^4",
246 |         "vary": "^1"
247 |       }
248 |     },
249 |     "debug": {
250 |       "version": "2.6.9",
251 |       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
252 |       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
253 |       "dev": true,
254 |       "requires": {
255 |         "ms": "2.0.0"
256 |       }
257 |     },
258 |     "deep-extend": {
259 |       "version": "0.6.0",
260 |       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
261 |       "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
262 |       "dev": true
263 |     },
264 |     "depd": {
265 |       "version": "1.1.2",
266 |       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
267 |       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
268 |       "dev": true
269 |     },
270 |     "destroy": {
271 |       "version": "1.0.4",
272 |       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
273 |       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
274 |       "dev": true
275 |     },
276 |     "ee-first": {
277 |       "version": "1.1.1",
278 |       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
279 |       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
280 |       "dev": true
281 |     },
282 |     "encodeurl": {
283 |       "version": "1.0.2",
284 |       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
285 |       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
286 |       "dev": true
287 |     },
288 |     "encoding": {
289 |       "version": "0.1.12",
290 |       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
291 |       "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
292 |       "dev": true,
293 |       "requires": {
294 |         "iconv-lite": "~0.4.13"
295 |       }
296 |     },
297 |     "escape-html": {
298 |       "version": "1.0.3",
299 |       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
300 |       "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
301 |       "dev": true
302 |     },
303 |     "escape-string-regexp": {
304 |       "version": "1.0.5",
305 |       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
306 |       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
307 |       "dev": true
308 |     },
309 |     "etag": {
310 |       "version": "1.8.1",
311 |       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
312 |       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
313 |       "dev": true
314 |     },
315 |     "express": {
316 |       "version": "4.16.4",
317 |       "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
318 |       "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==",
319 |       "dev": true,
320 |       "requires": {
321 |         "accepts": "~1.3.5",
322 |         "array-flatten": "1.1.1",
323 |         "body-parser": "1.18.3",
324 |         "content-disposition": "0.5.2",
325 |         "content-type": "~1.0.4",
326 |         "cookie": "0.3.1",
327 |         "cookie-signature": "1.0.6",
328 |         "debug": "2.6.9",
329 |         "depd": "~1.1.2",
330 |         "encodeurl": "~1.0.2",
331 |         "escape-html": "~1.0.3",
332 |         "etag": "~1.8.1",
333 |         "finalhandler": "1.1.1",
334 |         "fresh": "0.5.2",
335 |         "merge-descriptors": "1.0.1",
336 |         "methods": "~1.1.2",
337 |         "on-finished": "~2.3.0",
338 |         "parseurl": "~1.3.2",
339 |         "path-to-regexp": "0.1.7",
340 |         "proxy-addr": "~2.0.4",
341 |         "qs": "6.5.2",
342 |         "range-parser": "~1.2.0",
343 |         "safe-buffer": "5.1.2",
344 |         "send": "0.16.2",
345 |         "serve-static": "1.13.2",
346 |         "setprototypeof": "1.1.0",
347 |         "statuses": "~1.4.0",
348 |         "type-is": "~1.6.16",
349 |         "utils-merge": "1.0.1",
350 |         "vary": "~1.1.2"
351 |       },
352 |       "dependencies": {
353 |         "statuses": {
354 |           "version": "1.4.0",
355 |           "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
356 |           "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
357 |           "dev": true
358 |         }
359 |       }
360 |     },
361 |     "finalhandler": {
362 |       "version": "1.1.1",
363 |       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
364 |       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
365 |       "dev": true,
366 |       "requires": {
367 |         "debug": "2.6.9",
368 |         "encodeurl": "~1.0.2",
369 |         "escape-html": "~1.0.3",
370 |         "on-finished": "~2.3.0",
371 |         "parseurl": "~1.3.2",
372 |         "statuses": "~1.4.0",
373 |         "unpipe": "~1.0.0"
374 |       },
375 |       "dependencies": {
376 |         "statuses": {
377 |           "version": "1.4.0",
378 |           "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
379 |           "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
380 |           "dev": true
381 |         }
382 |       }
383 |     },
384 |     "flat": {
385 |       "version": "4.1.0",
386 |       "resolved": "https://registry.npmjs.org/flat/-/flat-4.1.0.tgz",
387 |       "integrity": "sha512-Px/TiLIznH7gEDlPXcUD4KnBusa6kR6ayRUVcnEAbreRIuhkqow/mun59BuRXwoYk7ZQOLW1ZM05ilIvK38hFw==",
388 |       "dev": true,
389 |       "requires": {
390 |         "is-buffer": "~2.0.3"
391 |       }
392 |     },
393 |     "forwarded": {
394 |       "version": "0.1.2",
395 |       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
396 |       "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
397 |       "dev": true
398 |     },
399 |     "fresh": {
400 |       "version": "0.5.2",
401 |       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
402 |       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
403 |       "dev": true
404 |     },
405 |     "fs-extra": {
406 |       "version": "7.0.1",
407 |       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
408 |       "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
409 |       "dev": true,
410 |       "requires": {
411 |         "graceful-fs": "^4.1.2",
412 |         "jsonfile": "^4.0.0",
413 |         "universalify": "^0.1.0"
414 |       }
415 |     },
416 |     "fs.realpath": {
417 |       "version": "1.0.0",
418 |       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
419 |       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
420 |       "dev": true
421 |     },
422 |     "glob": {
423 |       "version": "7.1.3",
424 |       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
425 |       "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
426 |       "dev": true,
427 |       "requires": {
428 |         "fs.realpath": "^1.0.0",
429 |         "inflight": "^1.0.4",
430 |         "inherits": "2",
431 |         "minimatch": "^3.0.4",
432 |         "once": "^1.3.0",
433 |         "path-is-absolute": "^1.0.0"
434 |       }
435 |     },
436 |     "graceful-fs": {
437 |       "version": "4.1.15",
438 |       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
439 |       "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
440 |       "dev": true
441 |     },
442 |     "has-flag": {
443 |       "version": "3.0.0",
444 |       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
445 |       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
446 |       "dev": true
447 |     },
448 |     "http-errors": {
449 |       "version": "1.6.3",
450 |       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
451 |       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
452 |       "dev": true,
453 |       "requires": {
454 |         "depd": "~1.1.2",
455 |         "inherits": "2.0.3",
456 |         "setprototypeof": "1.1.0",
457 |         "statuses": ">= 1.4.0 < 2"
458 |       }
459 |     },
460 |     "iconv-lite": {
461 |       "version": "0.4.23",
462 |       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
463 |       "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
464 |       "dev": true,
465 |       "requires": {
466 |         "safer-buffer": ">= 2.1.2 < 3"
467 |       }
468 |     },
469 |     "imurmurhash": {
470 |       "version": "0.1.4",
471 |       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
472 |       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
473 |       "dev": true
474 |     },
475 |     "inflight": {
476 |       "version": "1.0.6",
477 |       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
478 |       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
479 |       "dev": true,
480 |       "requires": {
481 |         "once": "^1.3.0",
482 |         "wrappy": "1"
483 |       }
484 |     },
485 |     "inherits": {
486 |       "version": "2.0.3",
487 |       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
488 |       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
489 |       "dev": true
490 |     },
491 |     "ini": {
492 |       "version": "1.3.5",
493 |       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
494 |       "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
495 |       "dev": true
496 |     },
497 |     "ipaddr.js": {
498 |       "version": "1.8.0",
499 |       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.8.0.tgz",
500 |       "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4=",
501 |       "dev": true
502 |     },
503 |     "is-buffer": {
504 |       "version": "2.0.3",
505 |       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
506 |       "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==",
507 |       "dev": true
508 |     },
509 |     "is-docker": {
510 |       "version": "1.1.0",
511 |       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-1.1.0.tgz",
512 |       "integrity": "sha1-8EN01O7lMQ6ajhE78UlUEeRhdqE=",
513 |       "dev": true
514 |     },
515 |     "is-stream": {
516 |       "version": "1.1.0",
517 |       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
518 |       "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
519 |       "dev": true
520 |     },
521 |     "is-wsl": {
522 |       "version": "1.1.0",
523 |       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
524 |       "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
525 |       "dev": true
526 |     },
527 |     "iso8601-duration": {
528 |       "version": "1.2.0",
529 |       "resolved": "https://registry.npmjs.org/iso8601-duration/-/iso8601-duration-1.2.0.tgz",
530 |       "integrity": "sha512-ErTBd++b17E8nmWII1K1uZtBgD1E8RjyvwmxlCjPHNqHMD7gmcMHOw0E8Ro/6+QT4PhHRSnnMo7bxa1vFPkwhg==",
531 |       "dev": true
532 |     },
533 |     "isomorphic-fetch": {
534 |       "version": "2.2.1",
535 |       "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
536 |       "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
537 |       "dev": true,
538 |       "requires": {
539 |         "node-fetch": "^1.0.1",
540 |         "whatwg-fetch": ">=0.10.0"
541 |       },
542 |       "dependencies": {
543 |         "node-fetch": {
544 |           "version": "1.7.3",
545 |           "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
546 |           "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
547 |           "dev": true,
548 |           "requires": {
549 |             "encoding": "^0.1.11",
550 |             "is-stream": "^1.0.1"
551 |           }
552 |         }
553 |       }
554 |     },
555 |     "jsonfile": {
556 |       "version": "4.0.0",
557 |       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
558 |       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
559 |       "dev": true,
560 |       "requires": {
561 |         "graceful-fs": "^4.1.6"
562 |       }
563 |     },
564 |     "jwt-decode": {
565 |       "version": "2.2.0",
566 |       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz",
567 |       "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk=",
568 |       "dev": true
569 |     },
570 |     "lodash": {
571 |       "version": "4.17.11",
572 |       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
573 |       "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
574 |       "dev": true
575 |     },
576 |     "media-typer": {
577 |       "version": "0.3.0",
578 |       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
579 |       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
580 |       "dev": true
581 |     },
582 |     "merge-descriptors": {
583 |       "version": "1.0.1",
584 |       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
585 |       "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
586 |       "dev": true
587 |     },
588 |     "methods": {
589 |       "version": "1.1.2",
590 |       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
591 |       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
592 |       "dev": true
593 |     },
594 |     "mime": {
595 |       "version": "1.4.1",
596 |       "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
597 |       "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==",
598 |       "dev": true
599 |     },
600 |     "mime-db": {
601 |       "version": "1.38.0",
602 |       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.38.0.tgz",
603 |       "integrity": "sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg==",
604 |       "dev": true
605 |     },
606 |     "mime-types": {
607 |       "version": "2.1.22",
608 |       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.22.tgz",
609 |       "integrity": "sha512-aGl6TZGnhm/li6F7yx82bJiBZwgiEa4Hf6CNr8YO+r5UHr53tSTYZb102zyU50DOWWKeOv0uQLRL0/9EiKWCog==",
610 |       "dev": true,
611 |       "requires": {
612 |         "mime-db": "~1.38.0"
613 |       }
614 |     },
615 |     "minimatch": {
616 |       "version": "3.0.4",
617 |       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
618 |       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
619 |       "dev": true,
620 |       "requires": {
621 |         "brace-expansion": "^1.1.7"
622 |       }
623 |     },
624 |     "minimist": {
625 |       "version": "1.2.0",
626 |       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
627 |       "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
628 |       "dev": true
629 |     },
630 |     "moment": {
631 |       "version": "2.24.0",
632 |       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
633 |       "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
634 |     },
635 |     "ms": {
636 |       "version": "2.0.0",
637 |       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
638 |       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
639 |       "dev": true
640 |     },
641 |     "negotiator": {
642 |       "version": "0.6.1",
643 |       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
644 |       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=",
645 |       "dev": true
646 |     },
647 |     "node-dir": {
648 |       "version": "0.1.17",
649 |       "resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz",
650 |       "integrity": "sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU=",
651 |       "dev": true,
652 |       "requires": {
653 |         "minimatch": "^3.0.2"
654 |       }
655 |     },
656 |     "node-fetch": {
657 |       "version": "2.6.0",
658 |       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
659 |       "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
660 |     },
661 |     "object-assign": {
662 |       "version": "4.1.1",
663 |       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
664 |       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
665 |       "dev": true
666 |     },
667 |     "on-finished": {
668 |       "version": "2.3.0",
669 |       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
670 |       "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
671 |       "dev": true,
672 |       "requires": {
673 |         "ee-first": "1.1.1"
674 |       }
675 |     },
676 |     "once": {
677 |       "version": "1.4.0",
678 |       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
679 |       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
680 |       "dev": true,
681 |       "requires": {
682 |         "wrappy": "1"
683 |       }
684 |     },
685 |     "opn": {
686 |       "version": "5.5.0",
687 |       "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
688 |       "integrity": "sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==",
689 |       "dev": true,
690 |       "requires": {
691 |         "is-wsl": "^1.1.0"
692 |       }
693 |     },
694 |     "parseurl": {
695 |       "version": "1.3.2",
696 |       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
697 |       "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=",
698 |       "dev": true
699 |     },
700 |     "path-is-absolute": {
701 |       "version": "1.0.1",
702 |       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
703 |       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
704 |       "dev": true
705 |     },
706 |     "path-to-regexp": {
707 |       "version": "0.1.7",
708 |       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
709 |       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
710 |       "dev": true
711 |     },
712 |     "proxy-addr": {
713 |       "version": "2.0.4",
714 |       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
715 |       "integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==",
716 |       "dev": true,
717 |       "requires": {
718 |         "forwarded": "~0.1.2",
719 |         "ipaddr.js": "1.8.0"
720 |       }
721 |     },
722 |     "qs": {
723 |       "version": "6.5.2",
724 |       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
725 |       "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
726 |       "dev": true
727 |     },
728 |     "querystring": {
729 |       "version": "0.2.0",
730 |       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
731 |       "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
732 |       "dev": true
733 |     },
734 |     "ramda": {
735 |       "version": "0.25.0",
736 |       "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.25.0.tgz",
737 |       "integrity": "sha512-GXpfrYVPwx3K7RQ6aYT8KPS8XViSXUVJT1ONhoKPE9VAleW42YE+U+8VEyGWt41EnEQW7gwecYJriTI0pKoecQ==",
738 |       "dev": true
739 |     },
740 |     "range-parser": {
741 |       "version": "1.2.0",
742 |       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
743 |       "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=",
744 |       "dev": true
745 |     },
746 |     "raw-body": {
747 |       "version": "2.3.3",
748 |       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz",
749 |       "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==",
750 |       "dev": true,
751 |       "requires": {
752 |         "bytes": "3.0.0",
753 |         "http-errors": "1.6.3",
754 |         "iconv-lite": "0.4.23",
755 |         "unpipe": "1.0.0"
756 |       }
757 |     },
758 |     "rc": {
759 |       "version": "1.2.8",
760 |       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
761 |       "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
762 |       "dev": true,
763 |       "requires": {
764 |         "deep-extend": "^0.6.0",
765 |         "ini": "~1.3.0",
766 |         "minimist": "^1.2.0",
767 |         "strip-json-comments": "~2.0.1"
768 |       }
769 |     },
770 |     "regenerator-runtime": {
771 |       "version": "0.13.2",
772 |       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
773 |       "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==",
774 |       "dev": true
775 |     },
776 |     "safe-buffer": {
777 |       "version": "5.1.2",
778 |       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
779 |       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
780 |       "dev": true
781 |     },
782 |     "safer-buffer": {
783 |       "version": "2.1.2",
784 |       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
785 |       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
786 |       "dev": true
787 |     },
788 |     "semver": {
789 |       "version": "5.7.0",
790 |       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
791 |       "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
792 |       "dev": true
793 |     },
794 |     "send": {
795 |       "version": "0.16.2",
796 |       "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
797 |       "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
798 |       "dev": true,
799 |       "requires": {
800 |         "debug": "2.6.9",
801 |         "depd": "~1.1.2",
802 |         "destroy": "~1.0.4",
803 |         "encodeurl": "~1.0.2",
804 |         "escape-html": "~1.0.3",
805 |         "etag": "~1.8.1",
806 |         "fresh": "0.5.2",
807 |         "http-errors": "~1.6.2",
808 |         "mime": "1.4.1",
809 |         "ms": "2.0.0",
810 |         "on-finished": "~2.3.0",
811 |         "range-parser": "~1.2.0",
812 |         "statuses": "~1.4.0"
813 |       },
814 |       "dependencies": {
815 |         "statuses": {
816 |           "version": "1.4.0",
817 |           "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
818 |           "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
819 |           "dev": true
820 |         }
821 |       }
822 |     },
823 |     "serve-static": {
824 |       "version": "1.13.2",
825 |       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
826 |       "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
827 |       "dev": true,
828 |       "requires": {
829 |         "encodeurl": "~1.0.2",
830 |         "escape-html": "~1.0.3",
831 |         "parseurl": "~1.3.2",
832 |         "send": "0.16.2"
833 |       }
834 |     },
835 |     "setprototypeof": {
836 |       "version": "1.1.0",
837 |       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
838 |       "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
839 |       "dev": true
840 |     },
841 |     "signal-exit": {
842 |       "version": "3.0.2",
843 |       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
844 |       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
845 |       "dev": true
846 |     },
847 |     "source-map": {
848 |       "version": "0.6.1",
849 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
850 |       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
851 |       "dev": true
852 |     },
853 |     "source-map-support": {
854 |       "version": "0.5.11",
855 |       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.11.tgz",
856 |       "integrity": "sha512-//sajEx/fGL3iw6fltKMdPvy8kL3kJ2O3iuYlRoT3k9Kb4BjOoZ+BZzaNHeuaruSt+Kf3Zk9tnfAQg9/AJqUVQ==",
857 |       "dev": true,
858 |       "requires": {
859 |         "buffer-from": "^1.0.0",
860 |         "source-map": "^0.6.0"
861 |       }
862 |     },
863 |     "sprintf-js": {
864 |       "version": "1.0.3",
865 |       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
866 |       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
867 |       "dev": true
868 |     },
869 |     "statuses": {
870 |       "version": "1.5.0",
871 |       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
872 |       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
873 |       "dev": true
874 |     },
875 |     "strip-json-comments": {
876 |       "version": "2.0.1",
877 |       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
878 |       "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
879 |       "dev": true
880 |     },
881 |     "supports-color": {
882 |       "version": "5.5.0",
883 |       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
884 |       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
885 |       "dev": true,
886 |       "requires": {
887 |         "has-flag": "^3.0.0"
888 |       }
889 |     },
890 |     "type-is": {
891 |       "version": "1.6.16",
892 |       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
893 |       "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
894 |       "dev": true,
895 |       "requires": {
896 |         "media-typer": "0.3.0",
897 |         "mime-types": "~2.1.18"
898 |       }
899 |     },
900 |     "universalify": {
901 |       "version": "0.1.2",
902 |       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
903 |       "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
904 |       "dev": true
905 |     },
906 |     "unpipe": {
907 |       "version": "1.0.0",
908 |       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
909 |       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
910 |       "dev": true
911 |     },
912 |     "utils-merge": {
913 |       "version": "1.0.1",
914 |       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
915 |       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
916 |       "dev": true
917 |     },
918 |     "uuid": {
919 |       "version": "3.3.2",
920 |       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
921 |       "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
922 |       "dev": true
923 |     },
924 |     "vary": {
925 |       "version": "1.1.2",
926 |       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
927 |       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
928 |       "dev": true
929 |     },
930 |     "whatwg-fetch": {
931 |       "version": "3.0.0",
932 |       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
933 |       "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==",
934 |       "dev": true
935 |     },
936 |     "wrappy": {
937 |       "version": "1.0.2",
938 |       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
939 |       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
940 |       "dev": true
941 |     },
942 |     "write-file-atomic": {
943 |       "version": "2.4.2",
944 |       "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.2.tgz",
945 |       "integrity": "sha512-s0b6vB3xIVRLWywa6X9TOMA7k9zio0TMOsl9ZnDkliA/cfJlpHXAscj0gbHVJiTdIuAYpIyqS5GW91fqm6gG5g==",
946 |       "dev": true,
947 |       "requires": {
948 |         "graceful-fs": "^4.1.11",
949 |         "imurmurhash": "^0.1.4",
950 |         "signal-exit": "^3.0.2"
951 |       }
952 |     },
953 |     "yamljs": {
954 |       "version": "0.3.0",
955 |       "resolved": "https://registry.npmjs.org/yamljs/-/yamljs-0.3.0.tgz",
956 |       "integrity": "sha512-C/FsVVhht4iPQYXOInoxUM/1ELSf9EsgKH34FofQOp6hwCPrW4vG4w5++TED3xRUo8gD7l0P1J1dLlDYzODsTQ==",
957 |       "dev": true,
958 |       "requires": {
959 |         "argparse": "^1.0.7",
960 |         "glob": "^7.0.5"
961 |       }
962 |     }
963 |   }
964 | }
965 | 


--------------------------------------------------------------------------------
/backend-tasks/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webapp-users",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "handler.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "moment": "^2.24.0",
13 |     "node-fetch": "^2.6.0"
14 |   },
15 |   "devDependencies": {
16 |     "@serverless/enterprise-plugin": "latest"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/backend-tasks/serverless.yml:
--------------------------------------------------------------------------------
 1 | org: ac360 # Enter your tenant name here
 2 | app: demos # Enter your application name here
 3 | service: fullstack-tasks # update
 4 | 
 5 | provider:
 6 |   name: aws
 7 |   runtime: nodejs8.10
 8 |   stage: dev
 9 |   region: us-east-1
10 |   environment:
11 |     url: ${param:test_endpoint}
12 | 
13 | functions:
14 |   testEndpoint:
15 |     handler: handler.testEndpoint
16 |     events:
17 |       - schedule: rate(5 minutes)
18 | 


--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fullstack-frontend",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "react": "^16.8.4",
 7 |     "react-dom": "^16.8.4",
 8 |     "react-scripts": "2.1.8"
 9 |   },
10 |   "devDependencies": {
11 |     "serverless-finch": "^2.4.2"
12 |   },
13 |   "scripts": {
14 |     "start": "react-scripts start",
15 |     "build": "react-scripts build",
16 |     "test": "react-scripts test",
17 |     "eject": "react-scripts eject"
18 |   },
19 |   "eslintConfig": {
20 |     "extends": "react-app"
21 |   },
22 |   "browserslist": [
23 |     ">0.2%",
24 |     "not dead",
25 |     "not ie <= 11",
26 |     "not op_mini all"
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/frontend/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/serverless/workshop/f4cc42cdd9f0865347dbfa42f67ab0beb56e3edc/frontend/public/favicon.ico


--------------------------------------------------------------------------------
/frontend/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta
 7 |       name="viewport"
 8 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 9 |     />
10 |     <meta name="theme-color" content="#000000" />
11 |     <!--
12 |       manifest.json provides metadata used when your web app is added to the
13 |       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
14 |     -->
15 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |     <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |     <title>Serverless Email Form</title>
26 |   </head>
27 |   <body>
28 |     <noscript>You need to enable JavaScript to run this app.</noscript>
29 |     <div id="root"></div>
30 |     <!--
31 |       This HTML file is a template.
32 |       If you open it directly in the browser, you will see an empty page.
33 | 
34 |       You can add webfonts, meta tags, or analytics to this file.
35 |       The build step will place the bundled scripts into the <body> tag.
36 | 
37 |       To begin the development, run `npm start` or `yarn start`.
38 |       To create a production bundle, use `npm run build` or `yarn build`.
39 |     -->
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/frontend/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/frontend/serverless.yml:
--------------------------------------------------------------------------------
 1 | org: ac360 # Enter your tenant name here
 2 | app: demos # Enter your application name here
 3 | service: fullstack-website
 4 | 
 5 | provider:
 6 |   name: aws
 7 |   runtime: nodejs8.10
 8 |   region: us-east-1
 9 | 
10 | plugins:
11 |   - serverless-finch
12 | 
13 | custom:
14 |   client:
15 |     bucketName: demo-fullstack-ja189j # Change this to a universally unique bucket name
16 |     distributionFolder: ./build
17 | 


--------------------------------------------------------------------------------
/frontend/src/DemoApp.css:
--------------------------------------------------------------------------------
   1 | * {
   2 |   box-sizing: border-box;
   3 |   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   4 |   font-weight: 300;
   5 | }
   6 | 
   7 | html, body {
   8 |   display: flex;
   9 |   flex-direction: column;
  10 |   box-sizing: border-box;
  11 |   height: 100%;
  12 |   width: 100%;
  13 |   background: #000000;
  14 | }
  15 | 
  16 | .DemoApp {
  17 |   display: flex;
  18 |   flex-direction: column;
  19 |   height: 100%;
  20 |   width: 100%;
  21 |   min-height: 100vh;
  22 | }
  23 | 
  24 | /* Admin Menu */
  25 | 
  26 | .DemoApp-admin {
  27 |   z-index: 10;
  28 |   position: absolute;
  29 |   display: flex;
  30 |   flex-direction: column;
  31 |   box-sizing: border-box;
  32 |   height: 100vh;
  33 |   width: 700px;
  34 |   padding: 1em 1em 1em 1em;
  35 |   margin-left: -750px;
  36 |   background: #000000;
  37 |   font-size: calc(10px + 2vmin);
  38 |   color: white;
  39 |   box-shadow: 5px 0 2px 0px rgba(0,0,0,0.2);
  40 |   -webkit-transition:all 0.3s ease-in-out;
  41 |   -moz-transition:all 0.3s ease-in-out;
  42 |   -o-transition:all 0.3s ease-in-out;
  43 |   transition:all 0.3s ease-in-out;
  44 | }
  45 | 
  46 | .DemoApp-admin.visible {
  47 |   margin-left: 0;
  48 | }
  49 | 
  50 | .DemoApp-admin .admin-close {
  51 |   position: absolute;
  52 |   top: 0px;
  53 |   right: 0px;
  54 |   padding: 0.4em 0.8em;
  55 |   color: #ffffff;
  56 |   opacity: 0.5;
  57 |   font-size: 38px;
  58 |   user-select: none;
  59 |   transform: scaleX(1.1) scaleY(0.9);
  60 |   -webkit-transition:all 0.2s ease-in-out;
  61 |   -moz-transition:all 0.2s ease-in-out;
  62 |   -o-transition:all 0.2s ease-in-out;
  63 |   transition:all 0.2s ease-in-out;
  64 | }
  65 | 
  66 | .DemoApp-admin .admin-close:hover {
  67 |   opacity: 1;
  68 |   cursor: pointer;
  69 | }
  70 | 
  71 | .DemoApp-admin .admin-section {
  72 |   display: flex;
  73 |   flex-direction: column;
  74 |   margin: 0 0 0.8em 0;
  75 |   padding: 0.8em 0 0 0;
  76 |   border-top: 1px solid rgba(255,255,255,0.2);
  77 | }
  78 | 
  79 | .DemoApp-admin .admin-section-general {
  80 |   display: flex;
  81 |   flex-direction: row;
  82 | }
  83 | 
  84 | .DemoApp-admin .admin-section-general-description {
  85 |   display: flex;
  86 |   flex-direction: column;
  87 |   height: auto;
  88 |   width: 85%;
  89 |   font-size: 15px;
  90 |   line-height: 22px;
  91 |   font-weight: 200;
  92 |   color: rgba(255,255,255,0.55);
  93 |   letter-spacing: 0.5px;
  94 |   padding: 0 0.3em 0.3em 0;
  95 |   box-sizing: border-box;
  96 | }
  97 | 
  98 | .DemoApp-admin .admin-section-general-button {
  99 |   display: flex;
 100 |   height: auto;
 101 |   width: 15%;
 102 | }
 103 | 
 104 | .DemoApp-admin .admin-label {
 105 |   display: flex;
 106 |   height: auto;
 107 |   width: 100%;
 108 |   font-size: 16px;
 109 |   font-weight: 600;
 110 |   color: #FFFFFF;
 111 |   margin: 0em 0 0.6em 0;
 112 | }
 113 | 
 114 | .DemoApp-admin .admin-input-description {
 115 |   display: flex;
 116 |   height: auto;
 117 |   width: 100%;
 118 |   font-size: 15px;
 119 |   line-height: 22px;
 120 |   font-weight: 200;
 121 |   color: rgba(255,255,255,0.45);
 122 |   margin: 0.4em 0 0 0;
 123 |   letter-spacing: 0.5px;
 124 | }
 125 | 
 126 | .DemoApp-admin .admin-section-field {
 127 |   display: flex;
 128 |   flex-direction: row;
 129 |   align-items: center;
 130 |   width: 100%;
 131 |   height: 50px;
 132 | }
 133 | 
 134 | .DemoApp-admin .admin-section-field .admin-button {
 135 |   width: 15%;
 136 | }
 137 | 
 138 | .DemoApp-admin .admin-section-button {
 139 |   display: flex;
 140 |   flex-direction: column;
 141 |   align-items: flex-start;
 142 |   width: 100%;
 143 |   height: auto;
 144 |   margin-bottom: 1em;
 145 |   user-select: none;
 146 | }
 147 | 
 148 | .DemoApp-admin .admin-input {
 149 |   display: flex;
 150 |   align-items: center;
 151 |   justify-content: center;
 152 |   box-sizing: border-box;
 153 |   padding: 0.2em 0.7em;
 154 |   width: 85%;
 155 |   height: 100%;
 156 |   border: none;
 157 |   font-size: 18px;
 158 |   font-weight: 300;
 159 |   background-color: rgba(255,255,255,0.2);
 160 |   border-top: 1px solid rgba(255,255,255,0);
 161 |   border-left: 1px solid rgba(255,255,255,0);
 162 |   border-bottom: 1px solid rgba(255,255,255,0);
 163 |   border-right: none;
 164 |   color: #FFFFFF;
 165 |   line-height: normal;
 166 |   outline: none;
 167 |   -webkit-transition:all 0.2s ease-in-out;
 168 |   -moz-transition:all 0.2s ease-in-out;
 169 |   -o-transition:all 0.2s ease-in-out;
 170 |   transition:all 0.2s ease-in-out;
 171 | }
 172 | 
 173 | .DemoApp-admin .admin-input:hover {
 174 |   cursor: pointer;
 175 | }
 176 | 
 177 | .DemoApp-admin .admin-input:focus {
 178 |   border-top: 1px solid rgba(255,255,255,0.7);
 179 |   border-left: 1px solid rgba(255,255,255,0.7);
 180 |   border-bottom: 1px solid rgba(255,255,255,0.7);
 181 |   border-right: none;
 182 | }
 183 | 
 184 | .DemoApp-admin .admin-input::placeholder {
 185 |   color: rgba(255,255,255,0.6);
 186 | }
 187 | 
 188 | .DemoApp-admin .admin-button {
 189 |   display: flex;
 190 |   flex-direction: row;
 191 |   align-items: center;
 192 |   justify-content: center;
 193 |   width: auto;
 194 |   max-width: 100px;
 195 |   height: 50px;
 196 |   padding: 0.5em 1em 0.5em 1em;
 197 |   background: #F15953;
 198 |   color: white;
 199 |   font-size: 16px;
 200 |   font-weight: 600;
 201 |   border: none;
 202 |   user-select: none;
 203 | }
 204 | 
 205 | .DemoApp-admin .admin-button:focus {
 206 |   outline: none;
 207 | }
 208 | 
 209 | .DemoApp-admin .admin-button:hover {
 210 |   cursor: pointer;
 211 |   background: #F15953;
 212 |   color: white;
 213 | }
 214 | 
 215 | .DemoApp-admin .admin-button:active {
 216 |   outline: none;
 217 |   background: white;
 218 |   color: #F15953;
 219 | }
 220 | 
 221 | .DemoApp-admin .admin-logo {
 222 |   display: flex;
 223 |   flex-direction: row;
 224 |   align-items: center;
 225 |   margin: 0 0 1.5em 0;
 226 |   font-size: 16px;
 227 |   font-weight: 600;
 228 | }
 229 | 
 230 | .DemoApp-admin .admin-logo img {
 231 |   height: auto;
 232 |   width: 30px;
 233 |   margin-right: 20px;;
 234 | }
 235 | 
 236 | .DemoApp-admin .admin-status {
 237 |   margin: 0;
 238 |   padding: 0;
 239 |   font-size: 24px;
 240 | }
 241 | 
 242 | /* Message Thread */
 243 | 
 244 | .DemoApp-content {
 245 |   display: flex;
 246 |   flex-direction: column;
 247 |   align-items: center;
 248 |   justify-content: flex-start;
 249 |   height: 100vh;
 250 |   width: 100%;
 251 |   box-sizing: border-box;
 252 |   background: #eaeaea;
 253 |   overflow-y: scroll;
 254 |   padding: 4em 0.75em;
 255 |   font-size: calc(10px + 2vmin);
 256 |   color: white;
 257 | }
 258 | 
 259 | .DemoApp-content .admin-link {
 260 |   position: fixed;
 261 |   display: flex;
 262 |   justify-content: flex-end;
 263 |   top: 20px;
 264 |   right: 30px;
 265 |   height: 100px;
 266 |   width: 200px;
 267 |   font-size: 22px;
 268 |   color: rgba(0,0,0,0.4);
 269 |   user-select: none;
 270 |   -webkit-transition:all 0.3s ease-in-out;
 271 |   -moz-transition:all 0.3s ease-in-out;
 272 |   -o-transition:all 0.3s ease-in-out;
 273 |   transition:all 0.3s ease-in-out;
 274 | }
 275 | 
 276 | .DemoApp-content .admin-link:hover {
 277 |   cursor: pointer;
 278 |   color: rgba(0,0,0,1);
 279 | }
 280 | 
 281 | .DemoApp-content .container {
 282 |   display: flex;
 283 |   flex-direction: column;
 284 |   width: 100%;
 285 |   max-width: 1000px;
 286 |   height: auto;
 287 |   background: #ffffff;
 288 |   padding: 2em;
 289 |   box-shadow: 0px 4px 2px rgba(0,0,0,0.2);
 290 | }
 291 | 
 292 | .DemoApp-content .form-header {
 293 |   display: flex;
 294 |   flex-direction: row;
 295 |   justify-content: center;
 296 |   width: 100%;
 297 |   height: auto;
 298 |   margin: 0 0 1.5em 0;
 299 |   color: #000000;
 300 | }
 301 | 
 302 | .DemoApp-content .form {
 303 |   display: flex;
 304 |   flex-direction: column;
 305 |   justify-content: center;
 306 |   margin: 0 auto;
 307 |   width: 100%;
 308 |   max-width: 600px;
 309 |   height: auto;
 310 |   color: #000000;
 311 | }
 312 | 
 313 | .DemoApp-content .form-field-label {
 314 |   display: flex;
 315 |   flex-direction: row;
 316 |   justify-content: center;
 317 |   width: 100%;
 318 |   height: auto;
 319 |   margin: 0 0 1em 0;
 320 |   color: #000000;
 321 |   font-size: 18px;
 322 | }
 323 | 
 324 | .DemoApp-content .form-field-input {
 325 |   display: flex;
 326 |   flex-direction: row;
 327 |   justify-content: center;
 328 |   align-content: center;
 329 |   text-align: center;
 330 |   height: 60px;
 331 |   width: 100%;
 332 |   margin: 0 0 1em 0;
 333 |   color: #000000;
 334 |   font-size: 26px;
 335 |   box-shadow: none;
 336 |   border: none;
 337 |   background: rgba(0,0,0,0.05);
 338 | }
 339 | 
 340 | .DemoApp-content .form-field-input::placeholder {
 341 |   color: rgba(0,0,0,0.2);
 342 | }
 343 | 
 344 | .DemoApp-content .form-field-input:focus {
 345 |   outline: none;
 346 | }
 347 | 
 348 | .DemoApp-content .form-field-button {
 349 |   display: flex;
 350 |   flex-direction: row;
 351 |   align-items: center;
 352 |   justify-content: center;
 353 |   width: 200px;
 354 |   height: 50px;
 355 |   padding: 0.5em 1em 0.5em 1em;
 356 |   background: #F15953;
 357 |   color: white;
 358 |   font-size: 16px;
 359 |   font-weight: 600;
 360 |   border: none;
 361 |   user-select: none;
 362 | }
 363 | 
 364 | .DemoApp-content .form-field-button-container {
 365 |   display: flex;
 366 |   flex-direction: row;
 367 |   justify-content: center;
 368 |   width: 100%;
 369 |   height: auto;
 370 |   margin-top: 0.75em;
 371 | }
 372 | 
 373 | .DemoApp-content .form-field-button:focus {
 374 |   outline: none;
 375 |   user-select: none;
 376 | }
 377 | 
 378 | .DemoApp-content .form-field-button:hover {
 379 |   cursor: pointer;
 380 | }
 381 | 
 382 | .DemoApp-content .success {
 383 |   display: flex;
 384 |   flex-direction: column;
 385 |   align-items: center;
 386 |   font-size: 32px;
 387 |   margin: 5em 0 6.4em 0;
 388 |   color: #000;
 389 | }
 390 | 
 391 | 
 392 | 
 393 | /*
 394 | * Animations
 395 | */
 396 | 
 397 | @charset "UTF-8";
 398 | 
 399 | /*!
 400 |  * animate.css -http://daneden.me/animate
 401 |  * Version - 3.7.0
 402 |  * Licensed under the MIT license - http://opensource.org/licenses/MIT
 403 |  *
 404 |  * Copyright (c) 2018 Daniel Eden
 405 |  */
 406 | 
 407 | @-webkit-keyframes bounce {
 408 |   from,
 409 |   20%,
 410 |   53%,
 411 |   80%,
 412 |   to {
 413 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 414 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 415 |     -webkit-transform: translate3d(0, 0, 0);
 416 |     transform: translate3d(0, 0, 0);
 417 |   }
 418 | 
 419 |   40%,
 420 |   43% {
 421 |     -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 422 |     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 423 |     -webkit-transform: translate3d(0, -30px, 0);
 424 |     transform: translate3d(0, -30px, 0);
 425 |   }
 426 | 
 427 |   70% {
 428 |     -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 429 |     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 430 |     -webkit-transform: translate3d(0, -15px, 0);
 431 |     transform: translate3d(0, -15px, 0);
 432 |   }
 433 | 
 434 |   90% {
 435 |     -webkit-transform: translate3d(0, -4px, 0);
 436 |     transform: translate3d(0, -4px, 0);
 437 |   }
 438 | }
 439 | 
 440 | @keyframes bounce {
 441 |   from,
 442 |   20%,
 443 |   53%,
 444 |   80%,
 445 |   to {
 446 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 447 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 448 |     -webkit-transform: translate3d(0, 0, 0);
 449 |     transform: translate3d(0, 0, 0);
 450 |   }
 451 | 
 452 |   40%,
 453 |   43% {
 454 |     -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 455 |     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 456 |     -webkit-transform: translate3d(0, -30px, 0);
 457 |     transform: translate3d(0, -30px, 0);
 458 |   }
 459 | 
 460 |   70% {
 461 |     -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 462 |     animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 463 |     -webkit-transform: translate3d(0, -15px, 0);
 464 |     transform: translate3d(0, -15px, 0);
 465 |   }
 466 | 
 467 |   90% {
 468 |     -webkit-transform: translate3d(0, -4px, 0);
 469 |     transform: translate3d(0, -4px, 0);
 470 |   }
 471 | }
 472 | 
 473 | .bounce {
 474 |   -webkit-animation-name: bounce;
 475 |   animation-name: bounce;
 476 |   -webkit-transform-origin: center bottom;
 477 |   transform-origin: center bottom;
 478 | }
 479 | 
 480 | @-webkit-keyframes flash {
 481 |   from,
 482 |   50%,
 483 |   to {
 484 |     opacity: 1;
 485 |   }
 486 | 
 487 |   25%,
 488 |   75% {
 489 |     opacity: 0;
 490 |   }
 491 | }
 492 | 
 493 | @keyframes flash {
 494 |   from,
 495 |   50%,
 496 |   to {
 497 |     opacity: 1;
 498 |   }
 499 | 
 500 |   25%,
 501 |   75% {
 502 |     opacity: 0;
 503 |   }
 504 | }
 505 | 
 506 | .flash {
 507 |   -webkit-animation-name: flash;
 508 |   animation-name: flash;
 509 | }
 510 | 
 511 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 512 | 
 513 | @-webkit-keyframes pulse {
 514 |   from {
 515 |     -webkit-transform: scale3d(1, 1, 1);
 516 |     transform: scale3d(1, 1, 1);
 517 |   }
 518 | 
 519 |   50% {
 520 |     -webkit-transform: scale3d(1.05, 1.05, 1.05);
 521 |     transform: scale3d(1.05, 1.05, 1.05);
 522 |   }
 523 | 
 524 |   to {
 525 |     -webkit-transform: scale3d(1, 1, 1);
 526 |     transform: scale3d(1, 1, 1);
 527 |   }
 528 | }
 529 | 
 530 | @keyframes pulse {
 531 |   from {
 532 |     -webkit-transform: scale3d(1, 1, 1);
 533 |     transform: scale3d(1, 1, 1);
 534 |   }
 535 | 
 536 |   50% {
 537 |     -webkit-transform: scale3d(1.05, 1.05, 1.05);
 538 |     transform: scale3d(1.05, 1.05, 1.05);
 539 |   }
 540 | 
 541 |   to {
 542 |     -webkit-transform: scale3d(1, 1, 1);
 543 |     transform: scale3d(1, 1, 1);
 544 |   }
 545 | }
 546 | 
 547 | .pulse {
 548 |   -webkit-animation-name: pulse;
 549 |   animation-name: pulse;
 550 | }
 551 | 
 552 | @-webkit-keyframes rubberBand {
 553 |   from {
 554 |     -webkit-transform: scale3d(1, 1, 1);
 555 |     transform: scale3d(1, 1, 1);
 556 |   }
 557 | 
 558 |   30% {
 559 |     -webkit-transform: scale3d(1.25, 0.75, 1);
 560 |     transform: scale3d(1.25, 0.75, 1);
 561 |   }
 562 | 
 563 |   40% {
 564 |     -webkit-transform: scale3d(0.75, 1.25, 1);
 565 |     transform: scale3d(0.75, 1.25, 1);
 566 |   }
 567 | 
 568 |   50% {
 569 |     -webkit-transform: scale3d(1.15, 0.85, 1);
 570 |     transform: scale3d(1.15, 0.85, 1);
 571 |   }
 572 | 
 573 |   65% {
 574 |     -webkit-transform: scale3d(0.95, 1.05, 1);
 575 |     transform: scale3d(0.95, 1.05, 1);
 576 |   }
 577 | 
 578 |   75% {
 579 |     -webkit-transform: scale3d(1.05, 0.95, 1);
 580 |     transform: scale3d(1.05, 0.95, 1);
 581 |   }
 582 | 
 583 |   to {
 584 |     -webkit-transform: scale3d(1, 1, 1);
 585 |     transform: scale3d(1, 1, 1);
 586 |   }
 587 | }
 588 | 
 589 | @keyframes rubberBand {
 590 |   from {
 591 |     -webkit-transform: scale3d(1, 1, 1);
 592 |     transform: scale3d(1, 1, 1);
 593 |   }
 594 | 
 595 |   30% {
 596 |     -webkit-transform: scale3d(1.25, 0.75, 1);
 597 |     transform: scale3d(1.25, 0.75, 1);
 598 |   }
 599 | 
 600 |   40% {
 601 |     -webkit-transform: scale3d(0.75, 1.25, 1);
 602 |     transform: scale3d(0.75, 1.25, 1);
 603 |   }
 604 | 
 605 |   50% {
 606 |     -webkit-transform: scale3d(1.15, 0.85, 1);
 607 |     transform: scale3d(1.15, 0.85, 1);
 608 |   }
 609 | 
 610 |   65% {
 611 |     -webkit-transform: scale3d(0.95, 1.05, 1);
 612 |     transform: scale3d(0.95, 1.05, 1);
 613 |   }
 614 | 
 615 |   75% {
 616 |     -webkit-transform: scale3d(1.05, 0.95, 1);
 617 |     transform: scale3d(1.05, 0.95, 1);
 618 |   }
 619 | 
 620 |   to {
 621 |     -webkit-transform: scale3d(1, 1, 1);
 622 |     transform: scale3d(1, 1, 1);
 623 |   }
 624 | }
 625 | 
 626 | .rubberBand {
 627 |   -webkit-animation-name: rubberBand;
 628 |   animation-name: rubberBand;
 629 | }
 630 | 
 631 | @-webkit-keyframes shake {
 632 |   from,
 633 |   to {
 634 |     -webkit-transform: translate3d(0, 0, 0);
 635 |     transform: translate3d(0, 0, 0);
 636 |   }
 637 | 
 638 |   10%,
 639 |   30%,
 640 |   50%,
 641 |   70%,
 642 |   90% {
 643 |     -webkit-transform: translate3d(-10px, 0, 0);
 644 |     transform: translate3d(-10px, 0, 0);
 645 |   }
 646 | 
 647 |   20%,
 648 |   40%,
 649 |   60%,
 650 |   80% {
 651 |     -webkit-transform: translate3d(10px, 0, 0);
 652 |     transform: translate3d(10px, 0, 0);
 653 |   }
 654 | }
 655 | 
 656 | @keyframes shake {
 657 |   from,
 658 |   to {
 659 |     -webkit-transform: translate3d(0, 0, 0);
 660 |     transform: translate3d(0, 0, 0);
 661 |   }
 662 | 
 663 |   10%,
 664 |   30%,
 665 |   50%,
 666 |   70%,
 667 |   90% {
 668 |     -webkit-transform: translate3d(-10px, 0, 0);
 669 |     transform: translate3d(-10px, 0, 0);
 670 |   }
 671 | 
 672 |   20%,
 673 |   40%,
 674 |   60%,
 675 |   80% {
 676 |     -webkit-transform: translate3d(10px, 0, 0);
 677 |     transform: translate3d(10px, 0, 0);
 678 |   }
 679 | }
 680 | 
 681 | .shake {
 682 |   -webkit-animation-name: shake;
 683 |   animation-name: shake;
 684 | }
 685 | 
 686 | @-webkit-keyframes headShake {
 687 |   0% {
 688 |     -webkit-transform: translateX(0);
 689 |     transform: translateX(0);
 690 |   }
 691 | 
 692 |   6.5% {
 693 |     -webkit-transform: translateX(-6px) rotateY(-9deg);
 694 |     transform: translateX(-6px) rotateY(-9deg);
 695 |   }
 696 | 
 697 |   18.5% {
 698 |     -webkit-transform: translateX(5px) rotateY(7deg);
 699 |     transform: translateX(5px) rotateY(7deg);
 700 |   }
 701 | 
 702 |   31.5% {
 703 |     -webkit-transform: translateX(-3px) rotateY(-5deg);
 704 |     transform: translateX(-3px) rotateY(-5deg);
 705 |   }
 706 | 
 707 |   43.5% {
 708 |     -webkit-transform: translateX(2px) rotateY(3deg);
 709 |     transform: translateX(2px) rotateY(3deg);
 710 |   }
 711 | 
 712 |   50% {
 713 |     -webkit-transform: translateX(0);
 714 |     transform: translateX(0);
 715 |   }
 716 | }
 717 | 
 718 | @keyframes headShake {
 719 |   0% {
 720 |     -webkit-transform: translateX(0);
 721 |     transform: translateX(0);
 722 |   }
 723 | 
 724 |   6.5% {
 725 |     -webkit-transform: translateX(-6px) rotateY(-9deg);
 726 |     transform: translateX(-6px) rotateY(-9deg);
 727 |   }
 728 | 
 729 |   18.5% {
 730 |     -webkit-transform: translateX(5px) rotateY(7deg);
 731 |     transform: translateX(5px) rotateY(7deg);
 732 |   }
 733 | 
 734 |   31.5% {
 735 |     -webkit-transform: translateX(-3px) rotateY(-5deg);
 736 |     transform: translateX(-3px) rotateY(-5deg);
 737 |   }
 738 | 
 739 |   43.5% {
 740 |     -webkit-transform: translateX(2px) rotateY(3deg);
 741 |     transform: translateX(2px) rotateY(3deg);
 742 |   }
 743 | 
 744 |   50% {
 745 |     -webkit-transform: translateX(0);
 746 |     transform: translateX(0);
 747 |   }
 748 | }
 749 | 
 750 | .headShake {
 751 |   -webkit-animation-timing-function: ease-in-out;
 752 |   animation-timing-function: ease-in-out;
 753 |   -webkit-animation-name: headShake;
 754 |   animation-name: headShake;
 755 | }
 756 | 
 757 | @-webkit-keyframes swing {
 758 |   20% {
 759 |     -webkit-transform: rotate3d(0, 0, 1, 15deg);
 760 |     transform: rotate3d(0, 0, 1, 15deg);
 761 |   }
 762 | 
 763 |   40% {
 764 |     -webkit-transform: rotate3d(0, 0, 1, -10deg);
 765 |     transform: rotate3d(0, 0, 1, -10deg);
 766 |   }
 767 | 
 768 |   60% {
 769 |     -webkit-transform: rotate3d(0, 0, 1, 5deg);
 770 |     transform: rotate3d(0, 0, 1, 5deg);
 771 |   }
 772 | 
 773 |   80% {
 774 |     -webkit-transform: rotate3d(0, 0, 1, -5deg);
 775 |     transform: rotate3d(0, 0, 1, -5deg);
 776 |   }
 777 | 
 778 |   to {
 779 |     -webkit-transform: rotate3d(0, 0, 1, 0deg);
 780 |     transform: rotate3d(0, 0, 1, 0deg);
 781 |   }
 782 | }
 783 | 
 784 | @keyframes swing {
 785 |   20% {
 786 |     -webkit-transform: rotate3d(0, 0, 1, 15deg);
 787 |     transform: rotate3d(0, 0, 1, 15deg);
 788 |   }
 789 | 
 790 |   40% {
 791 |     -webkit-transform: rotate3d(0, 0, 1, -10deg);
 792 |     transform: rotate3d(0, 0, 1, -10deg);
 793 |   }
 794 | 
 795 |   60% {
 796 |     -webkit-transform: rotate3d(0, 0, 1, 5deg);
 797 |     transform: rotate3d(0, 0, 1, 5deg);
 798 |   }
 799 | 
 800 |   80% {
 801 |     -webkit-transform: rotate3d(0, 0, 1, -5deg);
 802 |     transform: rotate3d(0, 0, 1, -5deg);
 803 |   }
 804 | 
 805 |   to {
 806 |     -webkit-transform: rotate3d(0, 0, 1, 0deg);
 807 |     transform: rotate3d(0, 0, 1, 0deg);
 808 |   }
 809 | }
 810 | 
 811 | .swing {
 812 |   -webkit-transform-origin: top center;
 813 |   transform-origin: top center;
 814 |   -webkit-animation-name: swing;
 815 |   animation-name: swing;
 816 | }
 817 | 
 818 | @-webkit-keyframes tada {
 819 |   from {
 820 |     -webkit-transform: scale3d(1, 1, 1);
 821 |     transform: scale3d(1, 1, 1);
 822 |   }
 823 | 
 824 |   10%,
 825 |   20% {
 826 |     -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
 827 |     transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
 828 |   }
 829 | 
 830 |   30%,
 831 |   50%,
 832 |   70%,
 833 |   90% {
 834 |     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 835 |     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 836 |   }
 837 | 
 838 |   40%,
 839 |   60%,
 840 |   80% {
 841 |     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 842 |     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 843 |   }
 844 | 
 845 |   to {
 846 |     -webkit-transform: scale3d(1, 1, 1);
 847 |     transform: scale3d(1, 1, 1);
 848 |   }
 849 | }
 850 | 
 851 | @keyframes tada {
 852 |   from {
 853 |     -webkit-transform: scale3d(1, 1, 1);
 854 |     transform: scale3d(1, 1, 1);
 855 |   }
 856 | 
 857 |   10%,
 858 |   20% {
 859 |     -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
 860 |     transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
 861 |   }
 862 | 
 863 |   30%,
 864 |   50%,
 865 |   70%,
 866 |   90% {
 867 |     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 868 |     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 869 |   }
 870 | 
 871 |   40%,
 872 |   60%,
 873 |   80% {
 874 |     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 875 |     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 876 |   }
 877 | 
 878 |   to {
 879 |     -webkit-transform: scale3d(1, 1, 1);
 880 |     transform: scale3d(1, 1, 1);
 881 |   }
 882 | }
 883 | 
 884 | .tada {
 885 |   -webkit-animation-name: tada;
 886 |   animation-name: tada;
 887 | }
 888 | 
 889 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 890 | 
 891 | @-webkit-keyframes wobble {
 892 |   from {
 893 |     -webkit-transform: translate3d(0, 0, 0);
 894 |     transform: translate3d(0, 0, 0);
 895 |   }
 896 | 
 897 |   15% {
 898 |     -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 899 |     transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 900 |   }
 901 | 
 902 |   30% {
 903 |     -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 904 |     transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 905 |   }
 906 | 
 907 |   45% {
 908 |     -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 909 |     transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 910 |   }
 911 | 
 912 |   60% {
 913 |     -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 914 |     transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 915 |   }
 916 | 
 917 |   75% {
 918 |     -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 919 |     transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 920 |   }
 921 | 
 922 |   to {
 923 |     -webkit-transform: translate3d(0, 0, 0);
 924 |     transform: translate3d(0, 0, 0);
 925 |   }
 926 | }
 927 | 
 928 | @keyframes wobble {
 929 |   from {
 930 |     -webkit-transform: translate3d(0, 0, 0);
 931 |     transform: translate3d(0, 0, 0);
 932 |   }
 933 | 
 934 |   15% {
 935 |     -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 936 |     transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 937 |   }
 938 | 
 939 |   30% {
 940 |     -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 941 |     transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 942 |   }
 943 | 
 944 |   45% {
 945 |     -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 946 |     transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 947 |   }
 948 | 
 949 |   60% {
 950 |     -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 951 |     transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 952 |   }
 953 | 
 954 |   75% {
 955 |     -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 956 |     transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 957 |   }
 958 | 
 959 |   to {
 960 |     -webkit-transform: translate3d(0, 0, 0);
 961 |     transform: translate3d(0, 0, 0);
 962 |   }
 963 | }
 964 | 
 965 | .wobble {
 966 |   -webkit-animation-name: wobble;
 967 |   animation-name: wobble;
 968 | }
 969 | 
 970 | @-webkit-keyframes jello {
 971 |   from,
 972 |   11.1%,
 973 |   to {
 974 |     -webkit-transform: translate3d(0, 0, 0);
 975 |     transform: translate3d(0, 0, 0);
 976 |   }
 977 | 
 978 |   22.2% {
 979 |     -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
 980 |     transform: skewX(-12.5deg) skewY(-12.5deg);
 981 |   }
 982 | 
 983 |   33.3% {
 984 |     -webkit-transform: skewX(6.25deg) skewY(6.25deg);
 985 |     transform: skewX(6.25deg) skewY(6.25deg);
 986 |   }
 987 | 
 988 |   44.4% {
 989 |     -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
 990 |     transform: skewX(-3.125deg) skewY(-3.125deg);
 991 |   }
 992 | 
 993 |   55.5% {
 994 |     -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
 995 |     transform: skewX(1.5625deg) skewY(1.5625deg);
 996 |   }
 997 | 
 998 |   66.6% {
 999 |     -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
1000 |     transform: skewX(-0.78125deg) skewY(-0.78125deg);
1001 |   }
1002 | 
1003 |   77.7% {
1004 |     -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
1005 |     transform: skewX(0.390625deg) skewY(0.390625deg);
1006 |   }
1007 | 
1008 |   88.8% {
1009 |     -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
1010 |     transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
1011 |   }
1012 | }
1013 | 
1014 | @keyframes jello {
1015 |   from,
1016 |   11.1%,
1017 |   to {
1018 |     -webkit-transform: translate3d(0, 0, 0);
1019 |     transform: translate3d(0, 0, 0);
1020 |   }
1021 | 
1022 |   22.2% {
1023 |     -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
1024 |     transform: skewX(-12.5deg) skewY(-12.5deg);
1025 |   }
1026 | 
1027 |   33.3% {
1028 |     -webkit-transform: skewX(6.25deg) skewY(6.25deg);
1029 |     transform: skewX(6.25deg) skewY(6.25deg);
1030 |   }
1031 | 
1032 |   44.4% {
1033 |     -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
1034 |     transform: skewX(-3.125deg) skewY(-3.125deg);
1035 |   }
1036 | 
1037 |   55.5% {
1038 |     -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
1039 |     transform: skewX(1.5625deg) skewY(1.5625deg);
1040 |   }
1041 | 
1042 |   66.6% {
1043 |     -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
1044 |     transform: skewX(-0.78125deg) skewY(-0.78125deg);
1045 |   }
1046 | 
1047 |   77.7% {
1048 |     -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
1049 |     transform: skewX(0.390625deg) skewY(0.390625deg);
1050 |   }
1051 | 
1052 |   88.8% {
1053 |     -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
1054 |     transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
1055 |   }
1056 | }
1057 | 
1058 | .jello {
1059 |   -webkit-animation-name: jello;
1060 |   animation-name: jello;
1061 |   -webkit-transform-origin: center;
1062 |   transform-origin: center;
1063 | }
1064 | 
1065 | @-webkit-keyframes heartBeat {
1066 |   0% {
1067 |     -webkit-transform: scale(1);
1068 |     transform: scale(1);
1069 |   }
1070 | 
1071 |   14% {
1072 |     -webkit-transform: scale(1.3);
1073 |     transform: scale(1.3);
1074 |   }
1075 | 
1076 |   28% {
1077 |     -webkit-transform: scale(1);
1078 |     transform: scale(1);
1079 |   }
1080 | 
1081 |   42% {
1082 |     -webkit-transform: scale(1.3);
1083 |     transform: scale(1.3);
1084 |   }
1085 | 
1086 |   70% {
1087 |     -webkit-transform: scale(1);
1088 |     transform: scale(1);
1089 |   }
1090 | }
1091 | 
1092 | @keyframes heartBeat {
1093 |   0% {
1094 |     -webkit-transform: scale(1);
1095 |     transform: scale(1);
1096 |   }
1097 | 
1098 |   14% {
1099 |     -webkit-transform: scale(1.3);
1100 |     transform: scale(1.3);
1101 |   }
1102 | 
1103 |   28% {
1104 |     -webkit-transform: scale(1);
1105 |     transform: scale(1);
1106 |   }
1107 | 
1108 |   42% {
1109 |     -webkit-transform: scale(1.3);
1110 |     transform: scale(1.3);
1111 |   }
1112 | 
1113 |   70% {
1114 |     -webkit-transform: scale(1);
1115 |     transform: scale(1);
1116 |   }
1117 | }
1118 | 
1119 | .heartBeat {
1120 |   -webkit-animation-name: heartBeat;
1121 |   animation-name: heartBeat;
1122 |   -webkit-animation-duration: 1.3s;
1123 |   animation-duration: 1.3s;
1124 |   -webkit-animation-timing-function: ease-in-out;
1125 |   animation-timing-function: ease-in-out;
1126 | }
1127 | 
1128 | @-webkit-keyframes bounceIn {
1129 |   from,
1130 |   20%,
1131 |   40%,
1132 |   60%,
1133 |   80%,
1134 |   to {
1135 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1136 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1137 |   }
1138 | 
1139 |   0% {
1140 |     opacity: 0;
1141 |     -webkit-transform: scale3d(0.3, 0.3, 0.3);
1142 |     transform: scale3d(0.3, 0.3, 0.3);
1143 |   }
1144 | 
1145 |   20% {
1146 |     -webkit-transform: scale3d(1.1, 1.1, 1.1);
1147 |     transform: scale3d(1.1, 1.1, 1.1);
1148 |   }
1149 | 
1150 |   40% {
1151 |     -webkit-transform: scale3d(0.9, 0.9, 0.9);
1152 |     transform: scale3d(0.9, 0.9, 0.9);
1153 |   }
1154 | 
1155 |   60% {
1156 |     opacity: 1;
1157 |     -webkit-transform: scale3d(1.03, 1.03, 1.03);
1158 |     transform: scale3d(1.03, 1.03, 1.03);
1159 |   }
1160 | 
1161 |   80% {
1162 |     -webkit-transform: scale3d(0.97, 0.97, 0.97);
1163 |     transform: scale3d(0.97, 0.97, 0.97);
1164 |   }
1165 | 
1166 |   to {
1167 |     opacity: 1;
1168 |     -webkit-transform: scale3d(1, 1, 1);
1169 |     transform: scale3d(1, 1, 1);
1170 |   }
1171 | }
1172 | 
1173 | @keyframes bounceIn {
1174 |   from,
1175 |   20%,
1176 |   40%,
1177 |   60%,
1178 |   80%,
1179 |   to {
1180 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1181 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1182 |   }
1183 | 
1184 |   0% {
1185 |     opacity: 0;
1186 |     -webkit-transform: scale3d(0.3, 0.3, 0.3);
1187 |     transform: scale3d(0.3, 0.3, 0.3);
1188 |   }
1189 | 
1190 |   20% {
1191 |     -webkit-transform: scale3d(1.1, 1.1, 1.1);
1192 |     transform: scale3d(1.1, 1.1, 1.1);
1193 |   }
1194 | 
1195 |   40% {
1196 |     -webkit-transform: scale3d(0.9, 0.9, 0.9);
1197 |     transform: scale3d(0.9, 0.9, 0.9);
1198 |   }
1199 | 
1200 |   60% {
1201 |     opacity: 1;
1202 |     -webkit-transform: scale3d(1.03, 1.03, 1.03);
1203 |     transform: scale3d(1.03, 1.03, 1.03);
1204 |   }
1205 | 
1206 |   80% {
1207 |     -webkit-transform: scale3d(0.97, 0.97, 0.97);
1208 |     transform: scale3d(0.97, 0.97, 0.97);
1209 |   }
1210 | 
1211 |   to {
1212 |     opacity: 1;
1213 |     -webkit-transform: scale3d(1, 1, 1);
1214 |     transform: scale3d(1, 1, 1);
1215 |   }
1216 | }
1217 | 
1218 | .bounceIn {
1219 |   -webkit-animation-duration: 0.75s;
1220 |   animation-duration: 0.75s;
1221 |   -webkit-animation-name: bounceIn;
1222 |   animation-name: bounceIn;
1223 | }
1224 | 
1225 | @-webkit-keyframes bounceInDown {
1226 |   from,
1227 |   60%,
1228 |   75%,
1229 |   90%,
1230 |   to {
1231 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1232 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1233 |   }
1234 | 
1235 |   0% {
1236 |     opacity: 0;
1237 |     -webkit-transform: translate3d(0, -3000px, 0);
1238 |     transform: translate3d(0, -3000px, 0);
1239 |   }
1240 | 
1241 |   60% {
1242 |     opacity: 1;
1243 |     -webkit-transform: translate3d(0, 25px, 0);
1244 |     transform: translate3d(0, 25px, 0);
1245 |   }
1246 | 
1247 |   75% {
1248 |     -webkit-transform: translate3d(0, -10px, 0);
1249 |     transform: translate3d(0, -10px, 0);
1250 |   }
1251 | 
1252 |   90% {
1253 |     -webkit-transform: translate3d(0, 5px, 0);
1254 |     transform: translate3d(0, 5px, 0);
1255 |   }
1256 | 
1257 |   to {
1258 |     -webkit-transform: translate3d(0, 0, 0);
1259 |     transform: translate3d(0, 0, 0);
1260 |   }
1261 | }
1262 | 
1263 | @keyframes bounceInDown {
1264 |   from,
1265 |   60%,
1266 |   75%,
1267 |   90%,
1268 |   to {
1269 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1270 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1271 |   }
1272 | 
1273 |   0% {
1274 |     opacity: 0;
1275 |     -webkit-transform: translate3d(0, -3000px, 0);
1276 |     transform: translate3d(0, -3000px, 0);
1277 |   }
1278 | 
1279 |   60% {
1280 |     opacity: 1;
1281 |     -webkit-transform: translate3d(0, 25px, 0);
1282 |     transform: translate3d(0, 25px, 0);
1283 |   }
1284 | 
1285 |   75% {
1286 |     -webkit-transform: translate3d(0, -10px, 0);
1287 |     transform: translate3d(0, -10px, 0);
1288 |   }
1289 | 
1290 |   90% {
1291 |     -webkit-transform: translate3d(0, 5px, 0);
1292 |     transform: translate3d(0, 5px, 0);
1293 |   }
1294 | 
1295 |   to {
1296 |     -webkit-transform: translate3d(0, 0, 0);
1297 |     transform: translate3d(0, 0, 0);
1298 |   }
1299 | }
1300 | 
1301 | .bounceInDown {
1302 |   -webkit-animation-name: bounceInDown;
1303 |   animation-name: bounceInDown;
1304 | }
1305 | 
1306 | @-webkit-keyframes bounceInLeft {
1307 |   from,
1308 |   60%,
1309 |   75%,
1310 |   90%,
1311 |   to {
1312 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1313 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1314 |   }
1315 | 
1316 |   0% {
1317 |     opacity: 0;
1318 |     -webkit-transform: translate3d(-3000px, 0, 0);
1319 |     transform: translate3d(-3000px, 0, 0);
1320 |   }
1321 | 
1322 |   60% {
1323 |     opacity: 1;
1324 |     -webkit-transform: translate3d(25px, 0, 0);
1325 |     transform: translate3d(25px, 0, 0);
1326 |   }
1327 | 
1328 |   75% {
1329 |     -webkit-transform: translate3d(-10px, 0, 0);
1330 |     transform: translate3d(-10px, 0, 0);
1331 |   }
1332 | 
1333 |   90% {
1334 |     -webkit-transform: translate3d(5px, 0, 0);
1335 |     transform: translate3d(5px, 0, 0);
1336 |   }
1337 | 
1338 |   to {
1339 |     -webkit-transform: translate3d(0, 0, 0);
1340 |     transform: translate3d(0, 0, 0);
1341 |   }
1342 | }
1343 | 
1344 | @keyframes bounceInLeft {
1345 |   from,
1346 |   60%,
1347 |   75%,
1348 |   90%,
1349 |   to {
1350 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1351 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1352 |   }
1353 | 
1354 |   0% {
1355 |     opacity: 0;
1356 |     -webkit-transform: translate3d(-3000px, 0, 0);
1357 |     transform: translate3d(-3000px, 0, 0);
1358 |   }
1359 | 
1360 |   60% {
1361 |     opacity: 1;
1362 |     -webkit-transform: translate3d(25px, 0, 0);
1363 |     transform: translate3d(25px, 0, 0);
1364 |   }
1365 | 
1366 |   75% {
1367 |     -webkit-transform: translate3d(-10px, 0, 0);
1368 |     transform: translate3d(-10px, 0, 0);
1369 |   }
1370 | 
1371 |   90% {
1372 |     -webkit-transform: translate3d(5px, 0, 0);
1373 |     transform: translate3d(5px, 0, 0);
1374 |   }
1375 | 
1376 |   to {
1377 |     -webkit-transform: translate3d(0, 0, 0);
1378 |     transform: translate3d(0, 0, 0);
1379 |   }
1380 | }
1381 | 
1382 | .bounceInLeft {
1383 |   -webkit-animation-name: bounceInLeft;
1384 |   animation-name: bounceInLeft;
1385 | }
1386 | 
1387 | @-webkit-keyframes bounceInRight {
1388 |   from,
1389 |   60%,
1390 |   75%,
1391 |   90%,
1392 |   to {
1393 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1394 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1395 |   }
1396 | 
1397 |   from {
1398 |     opacity: 0;
1399 |     -webkit-transform: translate3d(3000px, 0, 0);
1400 |     transform: translate3d(3000px, 0, 0);
1401 |   }
1402 | 
1403 |   60% {
1404 |     opacity: 1;
1405 |     -webkit-transform: translate3d(-25px, 0, 0);
1406 |     transform: translate3d(-25px, 0, 0);
1407 |   }
1408 | 
1409 |   75% {
1410 |     -webkit-transform: translate3d(10px, 0, 0);
1411 |     transform: translate3d(10px, 0, 0);
1412 |   }
1413 | 
1414 |   90% {
1415 |     -webkit-transform: translate3d(-5px, 0, 0);
1416 |     transform: translate3d(-5px, 0, 0);
1417 |   }
1418 | 
1419 |   to {
1420 |     -webkit-transform: translate3d(0, 0, 0);
1421 |     transform: translate3d(0, 0, 0);
1422 |   }
1423 | }
1424 | 
1425 | @keyframes bounceInRight {
1426 |   from,
1427 |   60%,
1428 |   75%,
1429 |   90%,
1430 |   to {
1431 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1432 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1433 |   }
1434 | 
1435 |   from {
1436 |     opacity: 0;
1437 |     -webkit-transform: translate3d(3000px, 0, 0);
1438 |     transform: translate3d(3000px, 0, 0);
1439 |   }
1440 | 
1441 |   60% {
1442 |     opacity: 1;
1443 |     -webkit-transform: translate3d(-25px, 0, 0);
1444 |     transform: translate3d(-25px, 0, 0);
1445 |   }
1446 | 
1447 |   75% {
1448 |     -webkit-transform: translate3d(10px, 0, 0);
1449 |     transform: translate3d(10px, 0, 0);
1450 |   }
1451 | 
1452 |   90% {
1453 |     -webkit-transform: translate3d(-5px, 0, 0);
1454 |     transform: translate3d(-5px, 0, 0);
1455 |   }
1456 | 
1457 |   to {
1458 |     -webkit-transform: translate3d(0, 0, 0);
1459 |     transform: translate3d(0, 0, 0);
1460 |   }
1461 | }
1462 | 
1463 | .bounceInRight {
1464 |   -webkit-animation-name: bounceInRight;
1465 |   animation-name: bounceInRight;
1466 | }
1467 | 
1468 | @-webkit-keyframes bounceInUp {
1469 |   from,
1470 |   60%,
1471 |   75%,
1472 |   90%,
1473 |   to {
1474 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1475 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1476 |   }
1477 | 
1478 |   from {
1479 |     opacity: 0;
1480 |     -webkit-transform: translate3d(0, 3000px, 0);
1481 |     transform: translate3d(0, 3000px, 0);
1482 |   }
1483 | 
1484 |   60% {
1485 |     opacity: 1;
1486 |     -webkit-transform: translate3d(0, -20px, 0);
1487 |     transform: translate3d(0, -20px, 0);
1488 |   }
1489 | 
1490 |   75% {
1491 |     -webkit-transform: translate3d(0, 10px, 0);
1492 |     transform: translate3d(0, 10px, 0);
1493 |   }
1494 | 
1495 |   90% {
1496 |     -webkit-transform: translate3d(0, -5px, 0);
1497 |     transform: translate3d(0, -5px, 0);
1498 |   }
1499 | 
1500 |   to {
1501 |     -webkit-transform: translate3d(0, 0, 0);
1502 |     transform: translate3d(0, 0, 0);
1503 |   }
1504 | }
1505 | 
1506 | @keyframes bounceInUp {
1507 |   from,
1508 |   60%,
1509 |   75%,
1510 |   90%,
1511 |   to {
1512 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1513 |     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
1514 |   }
1515 | 
1516 |   from {
1517 |     opacity: 0;
1518 |     -webkit-transform: translate3d(0, 3000px, 0);
1519 |     transform: translate3d(0, 3000px, 0);
1520 |   }
1521 | 
1522 |   60% {
1523 |     opacity: 1;
1524 |     -webkit-transform: translate3d(0, -20px, 0);
1525 |     transform: translate3d(0, -20px, 0);
1526 |   }
1527 | 
1528 |   75% {
1529 |     -webkit-transform: translate3d(0, 10px, 0);
1530 |     transform: translate3d(0, 10px, 0);
1531 |   }
1532 | 
1533 |   90% {
1534 |     -webkit-transform: translate3d(0, -5px, 0);
1535 |     transform: translate3d(0, -5px, 0);
1536 |   }
1537 | 
1538 |   to {
1539 |     -webkit-transform: translate3d(0, 0, 0);
1540 |     transform: translate3d(0, 0, 0);
1541 |   }
1542 | }
1543 | 
1544 | .bounceInUp {
1545 |   -webkit-animation-name: bounceInUp;
1546 |   animation-name: bounceInUp;
1547 | }
1548 | 
1549 | @-webkit-keyframes bounceOut {
1550 |   20% {
1551 |     -webkit-transform: scale3d(0.9, 0.9, 0.9);
1552 |     transform: scale3d(0.9, 0.9, 0.9);
1553 |   }
1554 | 
1555 |   50%,
1556 |   55% {
1557 |     opacity: 1;
1558 |     -webkit-transform: scale3d(1.1, 1.1, 1.1);
1559 |     transform: scale3d(1.1, 1.1, 1.1);
1560 |   }
1561 | 
1562 |   to {
1563 |     opacity: 0;
1564 |     -webkit-transform: scale3d(0.3, 0.3, 0.3);
1565 |     transform: scale3d(0.3, 0.3, 0.3);
1566 |   }
1567 | }
1568 | 
1569 | @keyframes bounceOut {
1570 |   20% {
1571 |     -webkit-transform: scale3d(0.9, 0.9, 0.9);
1572 |     transform: scale3d(0.9, 0.9, 0.9);
1573 |   }
1574 | 
1575 |   50%,
1576 |   55% {
1577 |     opacity: 1;
1578 |     -webkit-transform: scale3d(1.1, 1.1, 1.1);
1579 |     transform: scale3d(1.1, 1.1, 1.1);
1580 |   }
1581 | 
1582 |   to {
1583 |     opacity: 0;
1584 |     -webkit-transform: scale3d(0.3, 0.3, 0.3);
1585 |     transform: scale3d(0.3, 0.3, 0.3);
1586 |   }
1587 | }
1588 | 
1589 | .bounceOut {
1590 |   -webkit-animation-duration: 0.75s;
1591 |   animation-duration: 0.75s;
1592 |   -webkit-animation-name: bounceOut;
1593 |   animation-name: bounceOut;
1594 | }
1595 | 
1596 | @-webkit-keyframes bounceOutDown {
1597 |   20% {
1598 |     -webkit-transform: translate3d(0, 10px, 0);
1599 |     transform: translate3d(0, 10px, 0);
1600 |   }
1601 | 
1602 |   40%,
1603 |   45% {
1604 |     opacity: 1;
1605 |     -webkit-transform: translate3d(0, -20px, 0);
1606 |     transform: translate3d(0, -20px, 0);
1607 |   }
1608 | 
1609 |   to {
1610 |     opacity: 0;
1611 |     -webkit-transform: translate3d(0, 2000px, 0);
1612 |     transform: translate3d(0, 2000px, 0);
1613 |   }
1614 | }
1615 | 
1616 | @keyframes bounceOutDown {
1617 |   20% {
1618 |     -webkit-transform: translate3d(0, 10px, 0);
1619 |     transform: translate3d(0, 10px, 0);
1620 |   }
1621 | 
1622 |   40%,
1623 |   45% {
1624 |     opacity: 1;
1625 |     -webkit-transform: translate3d(0, -20px, 0);
1626 |     transform: translate3d(0, -20px, 0);
1627 |   }
1628 | 
1629 |   to {
1630 |     opacity: 0;
1631 |     -webkit-transform: translate3d(0, 2000px, 0);
1632 |     transform: translate3d(0, 2000px, 0);
1633 |   }
1634 | }
1635 | 
1636 | .bounceOutDown {
1637 |   -webkit-animation-name: bounceOutDown;
1638 |   animation-name: bounceOutDown;
1639 | }
1640 | 
1641 | @-webkit-keyframes bounceOutLeft {
1642 |   20% {
1643 |     opacity: 1;
1644 |     -webkit-transform: translate3d(20px, 0, 0);
1645 |     transform: translate3d(20px, 0, 0);
1646 |   }
1647 | 
1648 |   to {
1649 |     opacity: 0;
1650 |     -webkit-transform: translate3d(-2000px, 0, 0);
1651 |     transform: translate3d(-2000px, 0, 0);
1652 |   }
1653 | }
1654 | 
1655 | @keyframes bounceOutLeft {
1656 |   20% {
1657 |     opacity: 1;
1658 |     -webkit-transform: translate3d(20px, 0, 0);
1659 |     transform: translate3d(20px, 0, 0);
1660 |   }
1661 | 
1662 |   to {
1663 |     opacity: 0;
1664 |     -webkit-transform: translate3d(-2000px, 0, 0);
1665 |     transform: translate3d(-2000px, 0, 0);
1666 |   }
1667 | }
1668 | 
1669 | .bounceOutLeft {
1670 |   -webkit-animation-name: bounceOutLeft;
1671 |   animation-name: bounceOutLeft;
1672 | }
1673 | 
1674 | @-webkit-keyframes bounceOutRight {
1675 |   20% {
1676 |     opacity: 1;
1677 |     -webkit-transform: translate3d(-20px, 0, 0);
1678 |     transform: translate3d(-20px, 0, 0);
1679 |   }
1680 | 
1681 |   to {
1682 |     opacity: 0;
1683 |     -webkit-transform: translate3d(2000px, 0, 0);
1684 |     transform: translate3d(2000px, 0, 0);
1685 |   }
1686 | }
1687 | 
1688 | @keyframes bounceOutRight {
1689 |   20% {
1690 |     opacity: 1;
1691 |     -webkit-transform: translate3d(-20px, 0, 0);
1692 |     transform: translate3d(-20px, 0, 0);
1693 |   }
1694 | 
1695 |   to {
1696 |     opacity: 0;
1697 |     -webkit-transform: translate3d(2000px, 0, 0);
1698 |     transform: translate3d(2000px, 0, 0);
1699 |   }
1700 | }
1701 | 
1702 | .bounceOutRight {
1703 |   -webkit-animation-name: bounceOutRight;
1704 |   animation-name: bounceOutRight;
1705 | }
1706 | 
1707 | @-webkit-keyframes bounceOutUp {
1708 |   20% {
1709 |     -webkit-transform: translate3d(0, -10px, 0);
1710 |     transform: translate3d(0, -10px, 0);
1711 |   }
1712 | 
1713 |   40%,
1714 |   45% {
1715 |     opacity: 1;
1716 |     -webkit-transform: translate3d(0, 20px, 0);
1717 |     transform: translate3d(0, 20px, 0);
1718 |   }
1719 | 
1720 |   to {
1721 |     opacity: 0;
1722 |     -webkit-transform: translate3d(0, -2000px, 0);
1723 |     transform: translate3d(0, -2000px, 0);
1724 |   }
1725 | }
1726 | 
1727 | @keyframes bounceOutUp {
1728 |   20% {
1729 |     -webkit-transform: translate3d(0, -10px, 0);
1730 |     transform: translate3d(0, -10px, 0);
1731 |   }
1732 | 
1733 |   40%,
1734 |   45% {
1735 |     opacity: 1;
1736 |     -webkit-transform: translate3d(0, 20px, 0);
1737 |     transform: translate3d(0, 20px, 0);
1738 |   }
1739 | 
1740 |   to {
1741 |     opacity: 0;
1742 |     -webkit-transform: translate3d(0, -2000px, 0);
1743 |     transform: translate3d(0, -2000px, 0);
1744 |   }
1745 | }
1746 | 
1747 | .bounceOutUp {
1748 |   -webkit-animation-name: bounceOutUp;
1749 |   animation-name: bounceOutUp;
1750 | }
1751 | 
1752 | @-webkit-keyframes fadeIn {
1753 |   from {
1754 |     opacity: 0;
1755 |   }
1756 | 
1757 |   to {
1758 |     opacity: 1;
1759 |   }
1760 | }
1761 | 
1762 | @keyframes fadeIn {
1763 |   from {
1764 |     opacity: 0;
1765 |   }
1766 | 
1767 |   to {
1768 |     opacity: 1;
1769 |   }
1770 | }
1771 | 
1772 | .fadeIn {
1773 |   -webkit-animation-name: fadeIn;
1774 |   animation-name: fadeIn;
1775 | }
1776 | 
1777 | @-webkit-keyframes fadeInDown {
1778 |   from {
1779 |     opacity: 0;
1780 |     -webkit-transform: translate3d(0, -100%, 0);
1781 |     transform: translate3d(0, -100%, 0);
1782 |   }
1783 | 
1784 |   to {
1785 |     opacity: 1;
1786 |     -webkit-transform: translate3d(0, 0, 0);
1787 |     transform: translate3d(0, 0, 0);
1788 |   }
1789 | }
1790 | 
1791 | @keyframes fadeInDown {
1792 |   from {
1793 |     opacity: 0;
1794 |     -webkit-transform: translate3d(0, -100%, 0);
1795 |     transform: translate3d(0, -100%, 0);
1796 |   }
1797 | 
1798 |   to {
1799 |     opacity: 1;
1800 |     -webkit-transform: translate3d(0, 0, 0);
1801 |     transform: translate3d(0, 0, 0);
1802 |   }
1803 | }
1804 | 
1805 | .fadeInDown {
1806 |   -webkit-animation-name: fadeInDown;
1807 |   animation-name: fadeInDown;
1808 | }
1809 | 
1810 | @-webkit-keyframes fadeInDownBig {
1811 |   from {
1812 |     opacity: 0;
1813 |     -webkit-transform: translate3d(0, -2000px, 0);
1814 |     transform: translate3d(0, -2000px, 0);
1815 |   }
1816 | 
1817 |   to {
1818 |     opacity: 1;
1819 |     -webkit-transform: translate3d(0, 0, 0);
1820 |     transform: translate3d(0, 0, 0);
1821 |   }
1822 | }
1823 | 
1824 | @keyframes fadeInDownBig {
1825 |   from {
1826 |     opacity: 0;
1827 |     -webkit-transform: translate3d(0, -2000px, 0);
1828 |     transform: translate3d(0, -2000px, 0);
1829 |   }
1830 | 
1831 |   to {
1832 |     opacity: 1;
1833 |     -webkit-transform: translate3d(0, 0, 0);
1834 |     transform: translate3d(0, 0, 0);
1835 |   }
1836 | }
1837 | 
1838 | .fadeInDownBig {
1839 |   -webkit-animation-name: fadeInDownBig;
1840 |   animation-name: fadeInDownBig;
1841 | }
1842 | 
1843 | @-webkit-keyframes fadeInLeft {
1844 |   from {
1845 |     opacity: 0;
1846 |     -webkit-transform: translate3d(-100%, 0, 0);
1847 |     transform: translate3d(-100%, 0, 0);
1848 |   }
1849 | 
1850 |   to {
1851 |     opacity: 1;
1852 |     -webkit-transform: translate3d(0, 0, 0);
1853 |     transform: translate3d(0, 0, 0);
1854 |   }
1855 | }
1856 | 
1857 | @keyframes fadeInLeft {
1858 |   from {
1859 |     opacity: 0;
1860 |     -webkit-transform: translate3d(-100%, 0, 0);
1861 |     transform: translate3d(-100%, 0, 0);
1862 |   }
1863 | 
1864 |   to {
1865 |     opacity: 1;
1866 |     -webkit-transform: translate3d(0, 0, 0);
1867 |     transform: translate3d(0, 0, 0);
1868 |   }
1869 | }
1870 | 
1871 | .fadeInLeft {
1872 |   -webkit-animation-name: fadeInLeft;
1873 |   animation-name: fadeInLeft;
1874 | }
1875 | 
1876 | @-webkit-keyframes fadeInLeftBig {
1877 |   from {
1878 |     opacity: 0;
1879 |     -webkit-transform: translate3d(-2000px, 0, 0);
1880 |     transform: translate3d(-2000px, 0, 0);
1881 |   }
1882 | 
1883 |   to {
1884 |     opacity: 1;
1885 |     -webkit-transform: translate3d(0, 0, 0);
1886 |     transform: translate3d(0, 0, 0);
1887 |   }
1888 | }
1889 | 
1890 | @keyframes fadeInLeftBig {
1891 |   from {
1892 |     opacity: 0;
1893 |     -webkit-transform: translate3d(-2000px, 0, 0);
1894 |     transform: translate3d(-2000px, 0, 0);
1895 |   }
1896 | 
1897 |   to {
1898 |     opacity: 1;
1899 |     -webkit-transform: translate3d(0, 0, 0);
1900 |     transform: translate3d(0, 0, 0);
1901 |   }
1902 | }
1903 | 
1904 | .fadeInLeftBig {
1905 |   -webkit-animation-name: fadeInLeftBig;
1906 |   animation-name: fadeInLeftBig;
1907 | }
1908 | 
1909 | @-webkit-keyframes fadeInRight {
1910 |   from {
1911 |     opacity: 0;
1912 |     -webkit-transform: translate3d(100%, 0, 0);
1913 |     transform: translate3d(100%, 0, 0);
1914 |   }
1915 | 
1916 |   to {
1917 |     opacity: 1;
1918 |     -webkit-transform: translate3d(0, 0, 0);
1919 |     transform: translate3d(0, 0, 0);
1920 |   }
1921 | }
1922 | 
1923 | @keyframes fadeInRight {
1924 |   from {
1925 |     opacity: 0;
1926 |     -webkit-transform: translate3d(100%, 0, 0);
1927 |     transform: translate3d(100%, 0, 0);
1928 |   }
1929 | 
1930 |   to {
1931 |     opacity: 1;
1932 |     -webkit-transform: translate3d(0, 0, 0);
1933 |     transform: translate3d(0, 0, 0);
1934 |   }
1935 | }
1936 | 
1937 | .fadeInRight {
1938 |   -webkit-animation-name: fadeInRight;
1939 |   animation-name: fadeInRight;
1940 | }
1941 | 
1942 | @-webkit-keyframes fadeInRightBig {
1943 |   from {
1944 |     opacity: 0;
1945 |     -webkit-transform: translate3d(2000px, 0, 0);
1946 |     transform: translate3d(2000px, 0, 0);
1947 |   }
1948 | 
1949 |   to {
1950 |     opacity: 1;
1951 |     -webkit-transform: translate3d(0, 0, 0);
1952 |     transform: translate3d(0, 0, 0);
1953 |   }
1954 | }
1955 | 
1956 | @keyframes fadeInRightBig {
1957 |   from {
1958 |     opacity: 0;
1959 |     -webkit-transform: translate3d(2000px, 0, 0);
1960 |     transform: translate3d(2000px, 0, 0);
1961 |   }
1962 | 
1963 |   to {
1964 |     opacity: 1;
1965 |     -webkit-transform: translate3d(0, 0, 0);
1966 |     transform: translate3d(0, 0, 0);
1967 |   }
1968 | }
1969 | 
1970 | .fadeInRightBig {
1971 |   -webkit-animation-name: fadeInRightBig;
1972 |   animation-name: fadeInRightBig;
1973 | }
1974 | 
1975 | @-webkit-keyframes fadeInUp {
1976 |   from {
1977 |     opacity: 0;
1978 |     -webkit-transform: translate3d(0, 100%, 0);
1979 |     transform: translate3d(0, 100%, 0);
1980 |   }
1981 | 
1982 |   to {
1983 |     opacity: 1;
1984 |     -webkit-transform: translate3d(0, 0, 0);
1985 |     transform: translate3d(0, 0, 0);
1986 |   }
1987 | }
1988 | 
1989 | @keyframes fadeInUp {
1990 |   from {
1991 |     opacity: 0;
1992 |     -webkit-transform: translate3d(0, 100%, 0);
1993 |     transform: translate3d(0, 100%, 0);
1994 |   }
1995 | 
1996 |   to {
1997 |     opacity: 1;
1998 |     -webkit-transform: translate3d(0, 0, 0);
1999 |     transform: translate3d(0, 0, 0);
2000 |   }
2001 | }
2002 | 
2003 | .fadeInUp {
2004 |   -webkit-animation-name: fadeInUp;
2005 |   animation-name: fadeInUp;
2006 | }
2007 | 
2008 | @-webkit-keyframes fadeInUpBig {
2009 |   from {
2010 |     opacity: 0;
2011 |     -webkit-transform: translate3d(0, 2000px, 0);
2012 |     transform: translate3d(0, 2000px, 0);
2013 |   }
2014 | 
2015 |   to {
2016 |     opacity: 1;
2017 |     -webkit-transform: translate3d(0, 0, 0);
2018 |     transform: translate3d(0, 0, 0);
2019 |   }
2020 | }
2021 | 
2022 | @keyframes fadeInUpBig {
2023 |   from {
2024 |     opacity: 0;
2025 |     -webkit-transform: translate3d(0, 2000px, 0);
2026 |     transform: translate3d(0, 2000px, 0);
2027 |   }
2028 | 
2029 |   to {
2030 |     opacity: 1;
2031 |     -webkit-transform: translate3d(0, 0, 0);
2032 |     transform: translate3d(0, 0, 0);
2033 |   }
2034 | }
2035 | 
2036 | .fadeInUpBig {
2037 |   -webkit-animation-name: fadeInUpBig;
2038 |   animation-name: fadeInUpBig;
2039 | }
2040 | 
2041 | @-webkit-keyframes fadeOut {
2042 |   from {
2043 |     opacity: 1;
2044 |   }
2045 | 
2046 |   to {
2047 |     opacity: 0;
2048 |   }
2049 | }
2050 | 
2051 | @keyframes fadeOut {
2052 |   from {
2053 |     opacity: 1;
2054 |   }
2055 | 
2056 |   to {
2057 |     opacity: 0;
2058 |   }
2059 | }
2060 | 
2061 | .fadeOut {
2062 |   -webkit-animation-name: fadeOut;
2063 |   animation-name: fadeOut;
2064 | }
2065 | 
2066 | @-webkit-keyframes fadeOutDown {
2067 |   from {
2068 |     opacity: 1;
2069 |   }
2070 | 
2071 |   to {
2072 |     opacity: 0;
2073 |     -webkit-transform: translate3d(0, 100%, 0);
2074 |     transform: translate3d(0, 100%, 0);
2075 |   }
2076 | }
2077 | 
2078 | @keyframes fadeOutDown {
2079 |   from {
2080 |     opacity: 1;
2081 |   }
2082 | 
2083 |   to {
2084 |     opacity: 0;
2085 |     -webkit-transform: translate3d(0, 100%, 0);
2086 |     transform: translate3d(0, 100%, 0);
2087 |   }
2088 | }
2089 | 
2090 | .fadeOutDown {
2091 |   -webkit-animation-name: fadeOutDown;
2092 |   animation-name: fadeOutDown;
2093 | }
2094 | 
2095 | @-webkit-keyframes fadeOutDownBig {
2096 |   from {
2097 |     opacity: 1;
2098 |   }
2099 | 
2100 |   to {
2101 |     opacity: 0;
2102 |     -webkit-transform: translate3d(0, 2000px, 0);
2103 |     transform: translate3d(0, 2000px, 0);
2104 |   }
2105 | }
2106 | 
2107 | @keyframes fadeOutDownBig {
2108 |   from {
2109 |     opacity: 1;
2110 |   }
2111 | 
2112 |   to {
2113 |     opacity: 0;
2114 |     -webkit-transform: translate3d(0, 2000px, 0);
2115 |     transform: translate3d(0, 2000px, 0);
2116 |   }
2117 | }
2118 | 
2119 | .fadeOutDownBig {
2120 |   -webkit-animation-name: fadeOutDownBig;
2121 |   animation-name: fadeOutDownBig;
2122 | }
2123 | 
2124 | @-webkit-keyframes fadeOutLeft {
2125 |   from {
2126 |     opacity: 1;
2127 |   }
2128 | 
2129 |   to {
2130 |     opacity: 0;
2131 |     -webkit-transform: translate3d(-100%, 0, 0);
2132 |     transform: translate3d(-100%, 0, 0);
2133 |   }
2134 | }
2135 | 
2136 | @keyframes fadeOutLeft {
2137 |   from {
2138 |     opacity: 1;
2139 |   }
2140 | 
2141 |   to {
2142 |     opacity: 0;
2143 |     -webkit-transform: translate3d(-100%, 0, 0);
2144 |     transform: translate3d(-100%, 0, 0);
2145 |   }
2146 | }
2147 | 
2148 | .fadeOutLeft {
2149 |   -webkit-animation-name: fadeOutLeft;
2150 |   animation-name: fadeOutLeft;
2151 | }
2152 | 
2153 | @-webkit-keyframes fadeOutLeftBig {
2154 |   from {
2155 |     opacity: 1;
2156 |   }
2157 | 
2158 |   to {
2159 |     opacity: 0;
2160 |     -webkit-transform: translate3d(-2000px, 0, 0);
2161 |     transform: translate3d(-2000px, 0, 0);
2162 |   }
2163 | }
2164 | 
2165 | @keyframes fadeOutLeftBig {
2166 |   from {
2167 |     opacity: 1;
2168 |   }
2169 | 
2170 |   to {
2171 |     opacity: 0;
2172 |     -webkit-transform: translate3d(-2000px, 0, 0);
2173 |     transform: translate3d(-2000px, 0, 0);
2174 |   }
2175 | }
2176 | 
2177 | .fadeOutLeftBig {
2178 |   -webkit-animation-name: fadeOutLeftBig;
2179 |   animation-name: fadeOutLeftBig;
2180 | }
2181 | 
2182 | @-webkit-keyframes fadeOutRight {
2183 |   from {
2184 |     opacity: 1;
2185 |   }
2186 | 
2187 |   to {
2188 |     opacity: 0;
2189 |     -webkit-transform: translate3d(100%, 0, 0);
2190 |     transform: translate3d(100%, 0, 0);
2191 |   }
2192 | }
2193 | 
2194 | @keyframes fadeOutRight {
2195 |   from {
2196 |     opacity: 1;
2197 |   }
2198 | 
2199 |   to {
2200 |     opacity: 0;
2201 |     -webkit-transform: translate3d(100%, 0, 0);
2202 |     transform: translate3d(100%, 0, 0);
2203 |   }
2204 | }
2205 | 
2206 | .fadeOutRight {
2207 |   -webkit-animation-name: fadeOutRight;
2208 |   animation-name: fadeOutRight;
2209 | }
2210 | 
2211 | @-webkit-keyframes fadeOutRightBig {
2212 |   from {
2213 |     opacity: 1;
2214 |   }
2215 | 
2216 |   to {
2217 |     opacity: 0;
2218 |     -webkit-transform: translate3d(2000px, 0, 0);
2219 |     transform: translate3d(2000px, 0, 0);
2220 |   }
2221 | }
2222 | 
2223 | @keyframes fadeOutRightBig {
2224 |   from {
2225 |     opacity: 1;
2226 |   }
2227 | 
2228 |   to {
2229 |     opacity: 0;
2230 |     -webkit-transform: translate3d(2000px, 0, 0);
2231 |     transform: translate3d(2000px, 0, 0);
2232 |   }
2233 | }
2234 | 
2235 | .fadeOutRightBig {
2236 |   -webkit-animation-name: fadeOutRightBig;
2237 |   animation-name: fadeOutRightBig;
2238 | }
2239 | 
2240 | @-webkit-keyframes fadeOutUp {
2241 |   from {
2242 |     opacity: 1;
2243 |   }
2244 | 
2245 |   to {
2246 |     opacity: 0;
2247 |     -webkit-transform: translate3d(0, -100%, 0);
2248 |     transform: translate3d(0, -100%, 0);
2249 |   }
2250 | }
2251 | 
2252 | @keyframes fadeOutUp {
2253 |   from {
2254 |     opacity: 1;
2255 |   }
2256 | 
2257 |   to {
2258 |     opacity: 0;
2259 |     -webkit-transform: translate3d(0, -100%, 0);
2260 |     transform: translate3d(0, -100%, 0);
2261 |   }
2262 | }
2263 | 
2264 | .fadeOutUp {
2265 |   -webkit-animation-name: fadeOutUp;
2266 |   animation-name: fadeOutUp;
2267 | }
2268 | 
2269 | @-webkit-keyframes fadeOutUpBig {
2270 |   from {
2271 |     opacity: 1;
2272 |   }
2273 | 
2274 |   to {
2275 |     opacity: 0;
2276 |     -webkit-transform: translate3d(0, -2000px, 0);
2277 |     transform: translate3d(0, -2000px, 0);
2278 |   }
2279 | }
2280 | 
2281 | @keyframes fadeOutUpBig {
2282 |   from {
2283 |     opacity: 1;
2284 |   }
2285 | 
2286 |   to {
2287 |     opacity: 0;
2288 |     -webkit-transform: translate3d(0, -2000px, 0);
2289 |     transform: translate3d(0, -2000px, 0);
2290 |   }
2291 | }
2292 | 
2293 | .fadeOutUpBig {
2294 |   -webkit-animation-name: fadeOutUpBig;
2295 |   animation-name: fadeOutUpBig;
2296 | }
2297 | 
2298 | @-webkit-keyframes flip {
2299 |   from {
2300 |     -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
2301 |       rotate3d(0, 1, 0, -360deg);
2302 |     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
2303 |     -webkit-animation-timing-function: ease-out;
2304 |     animation-timing-function: ease-out;
2305 |   }
2306 | 
2307 |   40% {
2308 |     -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
2309 |       rotate3d(0, 1, 0, -190deg);
2310 |     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
2311 |       rotate3d(0, 1, 0, -190deg);
2312 |     -webkit-animation-timing-function: ease-out;
2313 |     animation-timing-function: ease-out;
2314 |   }
2315 | 
2316 |   50% {
2317 |     -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
2318 |       rotate3d(0, 1, 0, -170deg);
2319 |     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
2320 |       rotate3d(0, 1, 0, -170deg);
2321 |     -webkit-animation-timing-function: ease-in;
2322 |     animation-timing-function: ease-in;
2323 |   }
2324 | 
2325 |   80% {
2326 |     -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
2327 |       rotate3d(0, 1, 0, 0deg);
2328 |     transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
2329 |       rotate3d(0, 1, 0, 0deg);
2330 |     -webkit-animation-timing-function: ease-in;
2331 |     animation-timing-function: ease-in;
2332 |   }
2333 | 
2334 |   to {
2335 |     -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
2336 |       rotate3d(0, 1, 0, 0deg);
2337 |     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
2338 |     -webkit-animation-timing-function: ease-in;
2339 |     animation-timing-function: ease-in;
2340 |   }
2341 | }
2342 | 
2343 | @keyframes flip {
2344 |   from {
2345 |     -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
2346 |       rotate3d(0, 1, 0, -360deg);
2347 |     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
2348 |     -webkit-animation-timing-function: ease-out;
2349 |     animation-timing-function: ease-out;
2350 |   }
2351 | 
2352 |   40% {
2353 |     -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
2354 |       rotate3d(0, 1, 0, -190deg);
2355 |     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
2356 |       rotate3d(0, 1, 0, -190deg);
2357 |     -webkit-animation-timing-function: ease-out;
2358 |     animation-timing-function: ease-out;
2359 |   }
2360 | 
2361 |   50% {
2362 |     -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
2363 |       rotate3d(0, 1, 0, -170deg);
2364 |     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
2365 |       rotate3d(0, 1, 0, -170deg);
2366 |     -webkit-animation-timing-function: ease-in;
2367 |     animation-timing-function: ease-in;
2368 |   }
2369 | 
2370 |   80% {
2371 |     -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
2372 |       rotate3d(0, 1, 0, 0deg);
2373 |     transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
2374 |       rotate3d(0, 1, 0, 0deg);
2375 |     -webkit-animation-timing-function: ease-in;
2376 |     animation-timing-function: ease-in;
2377 |   }
2378 | 
2379 |   to {
2380 |     -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
2381 |       rotate3d(0, 1, 0, 0deg);
2382 |     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
2383 |     -webkit-animation-timing-function: ease-in;
2384 |     animation-timing-function: ease-in;
2385 |   }
2386 | }
2387 | 
2388 | .animated.flip {
2389 |   -webkit-backface-visibility: visible;
2390 |   backface-visibility: visible;
2391 |   -webkit-animation-name: flip;
2392 |   animation-name: flip;
2393 | }
2394 | 
2395 | @-webkit-keyframes flipInX {
2396 |   from {
2397 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2398 |     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2399 |     -webkit-animation-timing-function: ease-in;
2400 |     animation-timing-function: ease-in;
2401 |     opacity: 0;
2402 |   }
2403 | 
2404 |   40% {
2405 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2406 |     transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2407 |     -webkit-animation-timing-function: ease-in;
2408 |     animation-timing-function: ease-in;
2409 |   }
2410 | 
2411 |   60% {
2412 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
2413 |     transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
2414 |     opacity: 1;
2415 |   }
2416 | 
2417 |   80% {
2418 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
2419 |     transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
2420 |   }
2421 | 
2422 |   to {
2423 |     -webkit-transform: perspective(400px);
2424 |     transform: perspective(400px);
2425 |   }
2426 | }
2427 | 
2428 | @keyframes flipInX {
2429 |   from {
2430 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2431 |     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2432 |     -webkit-animation-timing-function: ease-in;
2433 |     animation-timing-function: ease-in;
2434 |     opacity: 0;
2435 |   }
2436 | 
2437 |   40% {
2438 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2439 |     transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2440 |     -webkit-animation-timing-function: ease-in;
2441 |     animation-timing-function: ease-in;
2442 |   }
2443 | 
2444 |   60% {
2445 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
2446 |     transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
2447 |     opacity: 1;
2448 |   }
2449 | 
2450 |   80% {
2451 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
2452 |     transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
2453 |   }
2454 | 
2455 |   to {
2456 |     -webkit-transform: perspective(400px);
2457 |     transform: perspective(400px);
2458 |   }
2459 | }
2460 | 
2461 | .flipInX {
2462 |   -webkit-backface-visibility: visible !important;
2463 |   backface-visibility: visible !important;
2464 |   -webkit-animation-name: flipInX;
2465 |   animation-name: flipInX;
2466 | }
2467 | 
2468 | @-webkit-keyframes flipInY {
2469 |   from {
2470 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2471 |     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2472 |     -webkit-animation-timing-function: ease-in;
2473 |     animation-timing-function: ease-in;
2474 |     opacity: 0;
2475 |   }
2476 | 
2477 |   40% {
2478 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
2479 |     transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
2480 |     -webkit-animation-timing-function: ease-in;
2481 |     animation-timing-function: ease-in;
2482 |   }
2483 | 
2484 |   60% {
2485 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
2486 |     transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
2487 |     opacity: 1;
2488 |   }
2489 | 
2490 |   80% {
2491 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
2492 |     transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
2493 |   }
2494 | 
2495 |   to {
2496 |     -webkit-transform: perspective(400px);
2497 |     transform: perspective(400px);
2498 |   }
2499 | }
2500 | 
2501 | @keyframes flipInY {
2502 |   from {
2503 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2504 |     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2505 |     -webkit-animation-timing-function: ease-in;
2506 |     animation-timing-function: ease-in;
2507 |     opacity: 0;
2508 |   }
2509 | 
2510 |   40% {
2511 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
2512 |     transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
2513 |     -webkit-animation-timing-function: ease-in;
2514 |     animation-timing-function: ease-in;
2515 |   }
2516 | 
2517 |   60% {
2518 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
2519 |     transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
2520 |     opacity: 1;
2521 |   }
2522 | 
2523 |   80% {
2524 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
2525 |     transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
2526 |   }
2527 | 
2528 |   to {
2529 |     -webkit-transform: perspective(400px);
2530 |     transform: perspective(400px);
2531 |   }
2532 | }
2533 | 
2534 | .flipInY {
2535 |   -webkit-backface-visibility: visible !important;
2536 |   backface-visibility: visible !important;
2537 |   -webkit-animation-name: flipInY;
2538 |   animation-name: flipInY;
2539 | }
2540 | 
2541 | @-webkit-keyframes flipOutX {
2542 |   from {
2543 |     -webkit-transform: perspective(400px);
2544 |     transform: perspective(400px);
2545 |   }
2546 | 
2547 |   30% {
2548 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2549 |     transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2550 |     opacity: 1;
2551 |   }
2552 | 
2553 |   to {
2554 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2555 |     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2556 |     opacity: 0;
2557 |   }
2558 | }
2559 | 
2560 | @keyframes flipOutX {
2561 |   from {
2562 |     -webkit-transform: perspective(400px);
2563 |     transform: perspective(400px);
2564 |   }
2565 | 
2566 |   30% {
2567 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2568 |     transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2569 |     opacity: 1;
2570 |   }
2571 | 
2572 |   to {
2573 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2574 |     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2575 |     opacity: 0;
2576 |   }
2577 | }
2578 | 
2579 | .flipOutX {
2580 |   -webkit-animation-duration: 0.75s;
2581 |   animation-duration: 0.75s;
2582 |   -webkit-animation-name: flipOutX;
2583 |   animation-name: flipOutX;
2584 |   -webkit-backface-visibility: visible !important;
2585 |   backface-visibility: visible !important;
2586 | }
2587 | 
2588 | @-webkit-keyframes flipOutY {
2589 |   from {
2590 |     -webkit-transform: perspective(400px);
2591 |     transform: perspective(400px);
2592 |   }
2593 | 
2594 |   30% {
2595 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2596 |     transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2597 |     opacity: 1;
2598 |   }
2599 | 
2600 |   to {
2601 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2602 |     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2603 |     opacity: 0;
2604 |   }
2605 | }
2606 | 
2607 | @keyframes flipOutY {
2608 |   from {
2609 |     -webkit-transform: perspective(400px);
2610 |     transform: perspective(400px);
2611 |   }
2612 | 
2613 |   30% {
2614 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2615 |     transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2616 |     opacity: 1;
2617 |   }
2618 | 
2619 |   to {
2620 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2621 |     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2622 |     opacity: 0;
2623 |   }
2624 | }
2625 | 
2626 | .flipOutY {
2627 |   -webkit-animation-duration: 0.75s;
2628 |   animation-duration: 0.75s;
2629 |   -webkit-backface-visibility: visible !important;
2630 |   backface-visibility: visible !important;
2631 |   -webkit-animation-name: flipOutY;
2632 |   animation-name: flipOutY;
2633 | }
2634 | 
2635 | @-webkit-keyframes lightSpeedIn {
2636 |   from {
2637 |     -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
2638 |     transform: translate3d(100%, 0, 0) skewX(-30deg);
2639 |     opacity: 0;
2640 |   }
2641 | 
2642 |   60% {
2643 |     -webkit-transform: skewX(20deg);
2644 |     transform: skewX(20deg);
2645 |     opacity: 1;
2646 |   }
2647 | 
2648 |   80% {
2649 |     -webkit-transform: skewX(-5deg);
2650 |     transform: skewX(-5deg);
2651 |   }
2652 | 
2653 |   to {
2654 |     -webkit-transform: translate3d(0, 0, 0);
2655 |     transform: translate3d(0, 0, 0);
2656 |   }
2657 | }
2658 | 
2659 | @keyframes lightSpeedIn {
2660 |   from {
2661 |     -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
2662 |     transform: translate3d(100%, 0, 0) skewX(-30deg);
2663 |     opacity: 0;
2664 |   }
2665 | 
2666 |   60% {
2667 |     -webkit-transform: skewX(20deg);
2668 |     transform: skewX(20deg);
2669 |     opacity: 1;
2670 |   }
2671 | 
2672 |   80% {
2673 |     -webkit-transform: skewX(-5deg);
2674 |     transform: skewX(-5deg);
2675 |   }
2676 | 
2677 |   to {
2678 |     -webkit-transform: translate3d(0, 0, 0);
2679 |     transform: translate3d(0, 0, 0);
2680 |   }
2681 | }
2682 | 
2683 | .lightSpeedIn {
2684 |   -webkit-animation-name: lightSpeedIn;
2685 |   animation-name: lightSpeedIn;
2686 |   -webkit-animation-timing-function: ease-out;
2687 |   animation-timing-function: ease-out;
2688 | }
2689 | 
2690 | @-webkit-keyframes lightSpeedOut {
2691 |   from {
2692 |     opacity: 1;
2693 |   }
2694 | 
2695 |   to {
2696 |     -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
2697 |     transform: translate3d(100%, 0, 0) skewX(30deg);
2698 |     opacity: 0;
2699 |   }
2700 | }
2701 | 
2702 | @keyframes lightSpeedOut {
2703 |   from {
2704 |     opacity: 1;
2705 |   }
2706 | 
2707 |   to {
2708 |     -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
2709 |     transform: translate3d(100%, 0, 0) skewX(30deg);
2710 |     opacity: 0;
2711 |   }
2712 | }
2713 | 
2714 | .lightSpeedOut {
2715 |   -webkit-animation-name: lightSpeedOut;
2716 |   animation-name: lightSpeedOut;
2717 |   -webkit-animation-timing-function: ease-in;
2718 |   animation-timing-function: ease-in;
2719 | }
2720 | 
2721 | @-webkit-keyframes rotateIn {
2722 |   from {
2723 |     -webkit-transform-origin: center;
2724 |     transform-origin: center;
2725 |     -webkit-transform: rotate3d(0, 0, 1, -200deg);
2726 |     transform: rotate3d(0, 0, 1, -200deg);
2727 |     opacity: 0;
2728 |   }
2729 | 
2730 |   to {
2731 |     -webkit-transform-origin: center;
2732 |     transform-origin: center;
2733 |     -webkit-transform: translate3d(0, 0, 0);
2734 |     transform: translate3d(0, 0, 0);
2735 |     opacity: 1;
2736 |   }
2737 | }
2738 | 
2739 | @keyframes rotateIn {
2740 |   from {
2741 |     -webkit-transform-origin: center;
2742 |     transform-origin: center;
2743 |     -webkit-transform: rotate3d(0, 0, 1, -200deg);
2744 |     transform: rotate3d(0, 0, 1, -200deg);
2745 |     opacity: 0;
2746 |   }
2747 | 
2748 |   to {
2749 |     -webkit-transform-origin: center;
2750 |     transform-origin: center;
2751 |     -webkit-transform: translate3d(0, 0, 0);
2752 |     transform: translate3d(0, 0, 0);
2753 |     opacity: 1;
2754 |   }
2755 | }
2756 | 
2757 | .rotateIn {
2758 |   -webkit-animation-name: rotateIn;
2759 |   animation-name: rotateIn;
2760 | }
2761 | 
2762 | @-webkit-keyframes rotateInDownLeft {
2763 |   from {
2764 |     -webkit-transform-origin: left bottom;
2765 |     transform-origin: left bottom;
2766 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
2767 |     transform: rotate3d(0, 0, 1, -45deg);
2768 |     opacity: 0;
2769 |   }
2770 | 
2771 |   to {
2772 |     -webkit-transform-origin: left bottom;
2773 |     transform-origin: left bottom;
2774 |     -webkit-transform: translate3d(0, 0, 0);
2775 |     transform: translate3d(0, 0, 0);
2776 |     opacity: 1;
2777 |   }
2778 | }
2779 | 
2780 | @keyframes rotateInDownLeft {
2781 |   from {
2782 |     -webkit-transform-origin: left bottom;
2783 |     transform-origin: left bottom;
2784 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
2785 |     transform: rotate3d(0, 0, 1, -45deg);
2786 |     opacity: 0;
2787 |   }
2788 | 
2789 |   to {
2790 |     -webkit-transform-origin: left bottom;
2791 |     transform-origin: left bottom;
2792 |     -webkit-transform: translate3d(0, 0, 0);
2793 |     transform: translate3d(0, 0, 0);
2794 |     opacity: 1;
2795 |   }
2796 | }
2797 | 
2798 | .rotateInDownLeft {
2799 |   -webkit-animation-name: rotateInDownLeft;
2800 |   animation-name: rotateInDownLeft;
2801 | }
2802 | 
2803 | @-webkit-keyframes rotateInDownRight {
2804 |   from {
2805 |     -webkit-transform-origin: right bottom;
2806 |     transform-origin: right bottom;
2807 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2808 |     transform: rotate3d(0, 0, 1, 45deg);
2809 |     opacity: 0;
2810 |   }
2811 | 
2812 |   to {
2813 |     -webkit-transform-origin: right bottom;
2814 |     transform-origin: right bottom;
2815 |     -webkit-transform: translate3d(0, 0, 0);
2816 |     transform: translate3d(0, 0, 0);
2817 |     opacity: 1;
2818 |   }
2819 | }
2820 | 
2821 | @keyframes rotateInDownRight {
2822 |   from {
2823 |     -webkit-transform-origin: right bottom;
2824 |     transform-origin: right bottom;
2825 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2826 |     transform: rotate3d(0, 0, 1, 45deg);
2827 |     opacity: 0;
2828 |   }
2829 | 
2830 |   to {
2831 |     -webkit-transform-origin: right bottom;
2832 |     transform-origin: right bottom;
2833 |     -webkit-transform: translate3d(0, 0, 0);
2834 |     transform: translate3d(0, 0, 0);
2835 |     opacity: 1;
2836 |   }
2837 | }
2838 | 
2839 | .rotateInDownRight {
2840 |   -webkit-animation-name: rotateInDownRight;
2841 |   animation-name: rotateInDownRight;
2842 | }
2843 | 
2844 | @-webkit-keyframes rotateInUpLeft {
2845 |   from {
2846 |     -webkit-transform-origin: left bottom;
2847 |     transform-origin: left bottom;
2848 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2849 |     transform: rotate3d(0, 0, 1, 45deg);
2850 |     opacity: 0;
2851 |   }
2852 | 
2853 |   to {
2854 |     -webkit-transform-origin: left bottom;
2855 |     transform-origin: left bottom;
2856 |     -webkit-transform: translate3d(0, 0, 0);
2857 |     transform: translate3d(0, 0, 0);
2858 |     opacity: 1;
2859 |   }
2860 | }
2861 | 
2862 | @keyframes rotateInUpLeft {
2863 |   from {
2864 |     -webkit-transform-origin: left bottom;
2865 |     transform-origin: left bottom;
2866 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2867 |     transform: rotate3d(0, 0, 1, 45deg);
2868 |     opacity: 0;
2869 |   }
2870 | 
2871 |   to {
2872 |     -webkit-transform-origin: left bottom;
2873 |     transform-origin: left bottom;
2874 |     -webkit-transform: translate3d(0, 0, 0);
2875 |     transform: translate3d(0, 0, 0);
2876 |     opacity: 1;
2877 |   }
2878 | }
2879 | 
2880 | .rotateInUpLeft {
2881 |   -webkit-animation-name: rotateInUpLeft;
2882 |   animation-name: rotateInUpLeft;
2883 | }
2884 | 
2885 | @-webkit-keyframes rotateInUpRight {
2886 |   from {
2887 |     -webkit-transform-origin: right bottom;
2888 |     transform-origin: right bottom;
2889 |     -webkit-transform: rotate3d(0, 0, 1, -90deg);
2890 |     transform: rotate3d(0, 0, 1, -90deg);
2891 |     opacity: 0;
2892 |   }
2893 | 
2894 |   to {
2895 |     -webkit-transform-origin: right bottom;
2896 |     transform-origin: right bottom;
2897 |     -webkit-transform: translate3d(0, 0, 0);
2898 |     transform: translate3d(0, 0, 0);
2899 |     opacity: 1;
2900 |   }
2901 | }
2902 | 
2903 | @keyframes rotateInUpRight {
2904 |   from {
2905 |     -webkit-transform-origin: right bottom;
2906 |     transform-origin: right bottom;
2907 |     -webkit-transform: rotate3d(0, 0, 1, -90deg);
2908 |     transform: rotate3d(0, 0, 1, -90deg);
2909 |     opacity: 0;
2910 |   }
2911 | 
2912 |   to {
2913 |     -webkit-transform-origin: right bottom;
2914 |     transform-origin: right bottom;
2915 |     -webkit-transform: translate3d(0, 0, 0);
2916 |     transform: translate3d(0, 0, 0);
2917 |     opacity: 1;
2918 |   }
2919 | }
2920 | 
2921 | .rotateInUpRight {
2922 |   -webkit-animation-name: rotateInUpRight;
2923 |   animation-name: rotateInUpRight;
2924 | }
2925 | 
2926 | @-webkit-keyframes rotateOut {
2927 |   from {
2928 |     -webkit-transform-origin: center;
2929 |     transform-origin: center;
2930 |     opacity: 1;
2931 |   }
2932 | 
2933 |   to {
2934 |     -webkit-transform-origin: center;
2935 |     transform-origin: center;
2936 |     -webkit-transform: rotate3d(0, 0, 1, 200deg);
2937 |     transform: rotate3d(0, 0, 1, 200deg);
2938 |     opacity: 0;
2939 |   }
2940 | }
2941 | 
2942 | @keyframes rotateOut {
2943 |   from {
2944 |     -webkit-transform-origin: center;
2945 |     transform-origin: center;
2946 |     opacity: 1;
2947 |   }
2948 | 
2949 |   to {
2950 |     -webkit-transform-origin: center;
2951 |     transform-origin: center;
2952 |     -webkit-transform: rotate3d(0, 0, 1, 200deg);
2953 |     transform: rotate3d(0, 0, 1, 200deg);
2954 |     opacity: 0;
2955 |   }
2956 | }
2957 | 
2958 | .rotateOut {
2959 |   -webkit-animation-name: rotateOut;
2960 |   animation-name: rotateOut;
2961 | }
2962 | 
2963 | @-webkit-keyframes rotateOutDownLeft {
2964 |   from {
2965 |     -webkit-transform-origin: left bottom;
2966 |     transform-origin: left bottom;
2967 |     opacity: 1;
2968 |   }
2969 | 
2970 |   to {
2971 |     -webkit-transform-origin: left bottom;
2972 |     transform-origin: left bottom;
2973 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2974 |     transform: rotate3d(0, 0, 1, 45deg);
2975 |     opacity: 0;
2976 |   }
2977 | }
2978 | 
2979 | @keyframes rotateOutDownLeft {
2980 |   from {
2981 |     -webkit-transform-origin: left bottom;
2982 |     transform-origin: left bottom;
2983 |     opacity: 1;
2984 |   }
2985 | 
2986 |   to {
2987 |     -webkit-transform-origin: left bottom;
2988 |     transform-origin: left bottom;
2989 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2990 |     transform: rotate3d(0, 0, 1, 45deg);
2991 |     opacity: 0;
2992 |   }
2993 | }
2994 | 
2995 | .rotateOutDownLeft {
2996 |   -webkit-animation-name: rotateOutDownLeft;
2997 |   animation-name: rotateOutDownLeft;
2998 | }
2999 | 
3000 | @-webkit-keyframes rotateOutDownRight {
3001 |   from {
3002 |     -webkit-transform-origin: right bottom;
3003 |     transform-origin: right bottom;
3004 |     opacity: 1;
3005 |   }
3006 | 
3007 |   to {
3008 |     -webkit-transform-origin: right bottom;
3009 |     transform-origin: right bottom;
3010 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
3011 |     transform: rotate3d(0, 0, 1, -45deg);
3012 |     opacity: 0;
3013 |   }
3014 | }
3015 | 
3016 | @keyframes rotateOutDownRight {
3017 |   from {
3018 |     -webkit-transform-origin: right bottom;
3019 |     transform-origin: right bottom;
3020 |     opacity: 1;
3021 |   }
3022 | 
3023 |   to {
3024 |     -webkit-transform-origin: right bottom;
3025 |     transform-origin: right bottom;
3026 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
3027 |     transform: rotate3d(0, 0, 1, -45deg);
3028 |     opacity: 0;
3029 |   }
3030 | }
3031 | 
3032 | .rotateOutDownRight {
3033 |   -webkit-animation-name: rotateOutDownRight;
3034 |   animation-name: rotateOutDownRight;
3035 | }
3036 | 
3037 | @-webkit-keyframes rotateOutUpLeft {
3038 |   from {
3039 |     -webkit-transform-origin: left bottom;
3040 |     transform-origin: left bottom;
3041 |     opacity: 1;
3042 |   }
3043 | 
3044 |   to {
3045 |     -webkit-transform-origin: left bottom;
3046 |     transform-origin: left bottom;
3047 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
3048 |     transform: rotate3d(0, 0, 1, -45deg);
3049 |     opacity: 0;
3050 |   }
3051 | }
3052 | 
3053 | @keyframes rotateOutUpLeft {
3054 |   from {
3055 |     -webkit-transform-origin: left bottom;
3056 |     transform-origin: left bottom;
3057 |     opacity: 1;
3058 |   }
3059 | 
3060 |   to {
3061 |     -webkit-transform-origin: left bottom;
3062 |     transform-origin: left bottom;
3063 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
3064 |     transform: rotate3d(0, 0, 1, -45deg);
3065 |     opacity: 0;
3066 |   }
3067 | }
3068 | 
3069 | .rotateOutUpLeft {
3070 |   -webkit-animation-name: rotateOutUpLeft;
3071 |   animation-name: rotateOutUpLeft;
3072 | }
3073 | 
3074 | @-webkit-keyframes rotateOutUpRight {
3075 |   from {
3076 |     -webkit-transform-origin: right bottom;
3077 |     transform-origin: right bottom;
3078 |     opacity: 1;
3079 |   }
3080 | 
3081 |   to {
3082 |     -webkit-transform-origin: right bottom;
3083 |     transform-origin: right bottom;
3084 |     -webkit-transform: rotate3d(0, 0, 1, 90deg);
3085 |     transform: rotate3d(0, 0, 1, 90deg);
3086 |     opacity: 0;
3087 |   }
3088 | }
3089 | 
3090 | @keyframes rotateOutUpRight {
3091 |   from {
3092 |     -webkit-transform-origin: right bottom;
3093 |     transform-origin: right bottom;
3094 |     opacity: 1;
3095 |   }
3096 | 
3097 |   to {
3098 |     -webkit-transform-origin: right bottom;
3099 |     transform-origin: right bottom;
3100 |     -webkit-transform: rotate3d(0, 0, 1, 90deg);
3101 |     transform: rotate3d(0, 0, 1, 90deg);
3102 |     opacity: 0;
3103 |   }
3104 | }
3105 | 
3106 | .rotateOutUpRight {
3107 |   -webkit-animation-name: rotateOutUpRight;
3108 |   animation-name: rotateOutUpRight;
3109 | }
3110 | 
3111 | @-webkit-keyframes hinge {
3112 |   0% {
3113 |     -webkit-transform-origin: top left;
3114 |     transform-origin: top left;
3115 |     -webkit-animation-timing-function: ease-in-out;
3116 |     animation-timing-function: ease-in-out;
3117 |   }
3118 | 
3119 |   20%,
3120 |   60% {
3121 |     -webkit-transform: rotate3d(0, 0, 1, 80deg);
3122 |     transform: rotate3d(0, 0, 1, 80deg);
3123 |     -webkit-transform-origin: top left;
3124 |     transform-origin: top left;
3125 |     -webkit-animation-timing-function: ease-in-out;
3126 |     animation-timing-function: ease-in-out;
3127 |   }
3128 | 
3129 |   40%,
3130 |   80% {
3131 |     -webkit-transform: rotate3d(0, 0, 1, 60deg);
3132 |     transform: rotate3d(0, 0, 1, 60deg);
3133 |     -webkit-transform-origin: top left;
3134 |     transform-origin: top left;
3135 |     -webkit-animation-timing-function: ease-in-out;
3136 |     animation-timing-function: ease-in-out;
3137 |     opacity: 1;
3138 |   }
3139 | 
3140 |   to {
3141 |     -webkit-transform: translate3d(0, 700px, 0);
3142 |     transform: translate3d(0, 700px, 0);
3143 |     opacity: 0;
3144 |   }
3145 | }
3146 | 
3147 | @keyframes hinge {
3148 |   0% {
3149 |     -webkit-transform-origin: top left;
3150 |     transform-origin: top left;
3151 |     -webkit-animation-timing-function: ease-in-out;
3152 |     animation-timing-function: ease-in-out;
3153 |   }
3154 | 
3155 |   20%,
3156 |   60% {
3157 |     -webkit-transform: rotate3d(0, 0, 1, 80deg);
3158 |     transform: rotate3d(0, 0, 1, 80deg);
3159 |     -webkit-transform-origin: top left;
3160 |     transform-origin: top left;
3161 |     -webkit-animation-timing-function: ease-in-out;
3162 |     animation-timing-function: ease-in-out;
3163 |   }
3164 | 
3165 |   40%,
3166 |   80% {
3167 |     -webkit-transform: rotate3d(0, 0, 1, 60deg);
3168 |     transform: rotate3d(0, 0, 1, 60deg);
3169 |     -webkit-transform-origin: top left;
3170 |     transform-origin: top left;
3171 |     -webkit-animation-timing-function: ease-in-out;
3172 |     animation-timing-function: ease-in-out;
3173 |     opacity: 1;
3174 |   }
3175 | 
3176 |   to {
3177 |     -webkit-transform: translate3d(0, 700px, 0);
3178 |     transform: translate3d(0, 700px, 0);
3179 |     opacity: 0;
3180 |   }
3181 | }
3182 | 
3183 | .hinge {
3184 |   -webkit-animation-duration: 2s;
3185 |   animation-duration: 2s;
3186 |   -webkit-animation-name: hinge;
3187 |   animation-name: hinge;
3188 | }
3189 | 
3190 | @-webkit-keyframes jackInTheBox {
3191 |   from {
3192 |     opacity: 0;
3193 |     -webkit-transform: scale(0.1) rotate(30deg);
3194 |     transform: scale(0.1) rotate(30deg);
3195 |     -webkit-transform-origin: center bottom;
3196 |     transform-origin: center bottom;
3197 |   }
3198 | 
3199 |   50% {
3200 |     -webkit-transform: rotate(-10deg);
3201 |     transform: rotate(-10deg);
3202 |   }
3203 | 
3204 |   70% {
3205 |     -webkit-transform: rotate(3deg);
3206 |     transform: rotate(3deg);
3207 |   }
3208 | 
3209 |   to {
3210 |     opacity: 1;
3211 |     -webkit-transform: scale(1);
3212 |     transform: scale(1);
3213 |   }
3214 | }
3215 | 
3216 | @keyframes jackInTheBox {
3217 |   from {
3218 |     opacity: 0;
3219 |     -webkit-transform: scale(0.1) rotate(30deg);
3220 |     transform: scale(0.1) rotate(30deg);
3221 |     -webkit-transform-origin: center bottom;
3222 |     transform-origin: center bottom;
3223 |   }
3224 | 
3225 |   50% {
3226 |     -webkit-transform: rotate(-10deg);
3227 |     transform: rotate(-10deg);
3228 |   }
3229 | 
3230 |   70% {
3231 |     -webkit-transform: rotate(3deg);
3232 |     transform: rotate(3deg);
3233 |   }
3234 | 
3235 |   to {
3236 |     opacity: 1;
3237 |     -webkit-transform: scale(1);
3238 |     transform: scale(1);
3239 |   }
3240 | }
3241 | 
3242 | .jackInTheBox {
3243 |   -webkit-animation-name: jackInTheBox;
3244 |   animation-name: jackInTheBox;
3245 | }
3246 | 
3247 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
3248 | 
3249 | @-webkit-keyframes rollIn {
3250 |   from {
3251 |     opacity: 0;
3252 |     -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
3253 |     transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
3254 |   }
3255 | 
3256 |   to {
3257 |     opacity: 1;
3258 |     -webkit-transform: translate3d(0, 0, 0);
3259 |     transform: translate3d(0, 0, 0);
3260 |   }
3261 | }
3262 | 
3263 | @keyframes rollIn {
3264 |   from {
3265 |     opacity: 0;
3266 |     -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
3267 |     transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
3268 |   }
3269 | 
3270 |   to {
3271 |     opacity: 1;
3272 |     -webkit-transform: translate3d(0, 0, 0);
3273 |     transform: translate3d(0, 0, 0);
3274 |   }
3275 | }
3276 | 
3277 | .rollIn {
3278 |   -webkit-animation-name: rollIn;
3279 |   animation-name: rollIn;
3280 | }
3281 | 
3282 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
3283 | 
3284 | @-webkit-keyframes rollOut {
3285 |   from {
3286 |     opacity: 1;
3287 |   }
3288 | 
3289 |   to {
3290 |     opacity: 0;
3291 |     -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
3292 |     transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
3293 |   }
3294 | }
3295 | 
3296 | @keyframes rollOut {
3297 |   from {
3298 |     opacity: 1;
3299 |   }
3300 | 
3301 |   to {
3302 |     opacity: 0;
3303 |     -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
3304 |     transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
3305 |   }
3306 | }
3307 | 
3308 | .rollOut {
3309 |   -webkit-animation-name: rollOut;
3310 |   animation-name: rollOut;
3311 | }
3312 | 
3313 | @-webkit-keyframes zoomIn {
3314 |   from {
3315 |     opacity: 0;
3316 |     -webkit-transform: scale3d(0.3, 0.3, 0.3);
3317 |     transform: scale3d(0.3, 0.3, 0.3);
3318 |   }
3319 | 
3320 |   50% {
3321 |     opacity: 1;
3322 |   }
3323 | }
3324 | 
3325 | @keyframes zoomIn {
3326 |   from {
3327 |     opacity: 0;
3328 |     -webkit-transform: scale3d(0.3, 0.3, 0.3);
3329 |     transform: scale3d(0.3, 0.3, 0.3);
3330 |   }
3331 | 
3332 |   50% {
3333 |     opacity: 1;
3334 |   }
3335 | }
3336 | 
3337 | .zoomIn {
3338 |   -webkit-animation-name: zoomIn;
3339 |   animation-name: zoomIn;
3340 | }
3341 | 
3342 | @-webkit-keyframes zoomInDown {
3343 |   from {
3344 |     opacity: 0;
3345 |     -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
3346 |     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
3347 |     -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3348 |     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3349 |   }
3350 | 
3351 |   60% {
3352 |     opacity: 1;
3353 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
3354 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
3355 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3356 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3357 |   }
3358 | }
3359 | 
3360 | @keyframes zoomInDown {
3361 |   from {
3362 |     opacity: 0;
3363 |     -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
3364 |     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
3365 |     -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3366 |     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3367 |   }
3368 | 
3369 |   60% {
3370 |     opacity: 1;
3371 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
3372 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
3373 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3374 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3375 |   }
3376 | }
3377 | 
3378 | .zoomInDown {
3379 |   -webkit-animation-name: zoomInDown;
3380 |   animation-name: zoomInDown;
3381 | }
3382 | 
3383 | @-webkit-keyframes zoomInLeft {
3384 |   from {
3385 |     opacity: 0;
3386 |     -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
3387 |     transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
3388 |     -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3389 |     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3390 |   }
3391 | 
3392 |   60% {
3393 |     opacity: 1;
3394 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
3395 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
3396 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3397 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3398 |   }
3399 | }
3400 | 
3401 | @keyframes zoomInLeft {
3402 |   from {
3403 |     opacity: 0;
3404 |     -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
3405 |     transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
3406 |     -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3407 |     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3408 |   }
3409 | 
3410 |   60% {
3411 |     opacity: 1;
3412 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
3413 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
3414 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3415 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3416 |   }
3417 | }
3418 | 
3419 | .zoomInLeft {
3420 |   -webkit-animation-name: zoomInLeft;
3421 |   animation-name: zoomInLeft;
3422 | }
3423 | 
3424 | @-webkit-keyframes zoomInRight {
3425 |   from {
3426 |     opacity: 0;
3427 |     -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
3428 |     transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
3429 |     -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3430 |     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3431 |   }
3432 | 
3433 |   60% {
3434 |     opacity: 1;
3435 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
3436 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
3437 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3438 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3439 |   }
3440 | }
3441 | 
3442 | @keyframes zoomInRight {
3443 |   from {
3444 |     opacity: 0;
3445 |     -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
3446 |     transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
3447 |     -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3448 |     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3449 |   }
3450 | 
3451 |   60% {
3452 |     opacity: 1;
3453 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
3454 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
3455 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3456 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3457 |   }
3458 | }
3459 | 
3460 | .zoomInRight {
3461 |   -webkit-animation-name: zoomInRight;
3462 |   animation-name: zoomInRight;
3463 | }
3464 | 
3465 | @-webkit-keyframes zoomInUp {
3466 |   from {
3467 |     opacity: 0;
3468 |     -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
3469 |     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
3470 |     -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3471 |     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3472 |   }
3473 | 
3474 |   60% {
3475 |     opacity: 1;
3476 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3477 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3478 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3479 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3480 |   }
3481 | }
3482 | 
3483 | @keyframes zoomInUp {
3484 |   from {
3485 |     opacity: 0;
3486 |     -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
3487 |     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
3488 |     -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3489 |     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3490 |   }
3491 | 
3492 |   60% {
3493 |     opacity: 1;
3494 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3495 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3496 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3497 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3498 |   }
3499 | }
3500 | 
3501 | .zoomInUp {
3502 |   -webkit-animation-name: zoomInUp;
3503 |   animation-name: zoomInUp;
3504 | }
3505 | 
3506 | @-webkit-keyframes zoomOut {
3507 |   from {
3508 |     opacity: 1;
3509 |   }
3510 | 
3511 |   50% {
3512 |     opacity: 0;
3513 |     -webkit-transform: scale3d(0.3, 0.3, 0.3);
3514 |     transform: scale3d(0.3, 0.3, 0.3);
3515 |   }
3516 | 
3517 |   to {
3518 |     opacity: 0;
3519 |   }
3520 | }
3521 | 
3522 | @keyframes zoomOut {
3523 |   from {
3524 |     opacity: 1;
3525 |   }
3526 | 
3527 |   50% {
3528 |     opacity: 0;
3529 |     -webkit-transform: scale3d(0.3, 0.3, 0.3);
3530 |     transform: scale3d(0.3, 0.3, 0.3);
3531 |   }
3532 | 
3533 |   to {
3534 |     opacity: 0;
3535 |   }
3536 | }
3537 | 
3538 | .zoomOut {
3539 |   -webkit-animation-name: zoomOut;
3540 |   animation-name: zoomOut;
3541 | }
3542 | 
3543 | @-webkit-keyframes zoomOutDown {
3544 |   40% {
3545 |     opacity: 1;
3546 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3547 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3548 |     -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3549 |     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3550 |   }
3551 | 
3552 |   to {
3553 |     opacity: 0;
3554 |     -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
3555 |     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
3556 |     -webkit-transform-origin: center bottom;
3557 |     transform-origin: center bottom;
3558 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3559 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3560 |   }
3561 | }
3562 | 
3563 | @keyframes zoomOutDown {
3564 |   40% {
3565 |     opacity: 1;
3566 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3567 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
3568 |     -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3569 |     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3570 |   }
3571 | 
3572 |   to {
3573 |     opacity: 0;
3574 |     -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
3575 |     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
3576 |     -webkit-transform-origin: center bottom;
3577 |     transform-origin: center bottom;
3578 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3579 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3580 |   }
3581 | }
3582 | 
3583 | .zoomOutDown {
3584 |   -webkit-animation-name: zoomOutDown;
3585 |   animation-name: zoomOutDown;
3586 | }
3587 | 
3588 | @-webkit-keyframes zoomOutLeft {
3589 |   40% {
3590 |     opacity: 1;
3591 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
3592 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
3593 |   }
3594 | 
3595 |   to {
3596 |     opacity: 0;
3597 |     -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
3598 |     transform: scale(0.1) translate3d(-2000px, 0, 0);
3599 |     -webkit-transform-origin: left center;
3600 |     transform-origin: left center;
3601 |   }
3602 | }
3603 | 
3604 | @keyframes zoomOutLeft {
3605 |   40% {
3606 |     opacity: 1;
3607 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
3608 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
3609 |   }
3610 | 
3611 |   to {
3612 |     opacity: 0;
3613 |     -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
3614 |     transform: scale(0.1) translate3d(-2000px, 0, 0);
3615 |     -webkit-transform-origin: left center;
3616 |     transform-origin: left center;
3617 |   }
3618 | }
3619 | 
3620 | .zoomOutLeft {
3621 |   -webkit-animation-name: zoomOutLeft;
3622 |   animation-name: zoomOutLeft;
3623 | }
3624 | 
3625 | @-webkit-keyframes zoomOutRight {
3626 |   40% {
3627 |     opacity: 1;
3628 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
3629 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
3630 |   }
3631 | 
3632 |   to {
3633 |     opacity: 0;
3634 |     -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
3635 |     transform: scale(0.1) translate3d(2000px, 0, 0);
3636 |     -webkit-transform-origin: right center;
3637 |     transform-origin: right center;
3638 |   }
3639 | }
3640 | 
3641 | @keyframes zoomOutRight {
3642 |   40% {
3643 |     opacity: 1;
3644 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
3645 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
3646 |   }
3647 | 
3648 |   to {
3649 |     opacity: 0;
3650 |     -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
3651 |     transform: scale(0.1) translate3d(2000px, 0, 0);
3652 |     -webkit-transform-origin: right center;
3653 |     transform-origin: right center;
3654 |   }
3655 | }
3656 | 
3657 | .zoomOutRight {
3658 |   -webkit-animation-name: zoomOutRight;
3659 |   animation-name: zoomOutRight;
3660 | }
3661 | 
3662 | @-webkit-keyframes zoomOutUp {
3663 |   40% {
3664 |     opacity: 1;
3665 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
3666 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
3667 |     -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3668 |     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3669 |   }
3670 | 
3671 |   to {
3672 |     opacity: 0;
3673 |     -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
3674 |     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
3675 |     -webkit-transform-origin: center bottom;
3676 |     transform-origin: center bottom;
3677 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3678 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3679 |   }
3680 | }
3681 | 
3682 | @keyframes zoomOutUp {
3683 |   40% {
3684 |     opacity: 1;
3685 |     -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
3686 |     transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
3687 |     -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3688 |     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
3689 |   }
3690 | 
3691 |   to {
3692 |     opacity: 0;
3693 |     -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
3694 |     transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
3695 |     -webkit-transform-origin: center bottom;
3696 |     transform-origin: center bottom;
3697 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3698 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
3699 |   }
3700 | }
3701 | 
3702 | .zoomOutUp {
3703 |   -webkit-animation-name: zoomOutUp;
3704 |   animation-name: zoomOutUp;
3705 | }
3706 | 
3707 | @-webkit-keyframes slideInDown {
3708 |   from {
3709 |     -webkit-transform: translate3d(0, -100%, 0);
3710 |     transform: translate3d(0, -100%, 0);
3711 |     visibility: visible;
3712 |   }
3713 | 
3714 |   to {
3715 |     -webkit-transform: translate3d(0, 0, 0);
3716 |     transform: translate3d(0, 0, 0);
3717 |   }
3718 | }
3719 | 
3720 | @keyframes slideInDown {
3721 |   from {
3722 |     -webkit-transform: translate3d(0, -100%, 0);
3723 |     transform: translate3d(0, -100%, 0);
3724 |     visibility: visible;
3725 |   }
3726 | 
3727 |   to {
3728 |     -webkit-transform: translate3d(0, 0, 0);
3729 |     transform: translate3d(0, 0, 0);
3730 |   }
3731 | }
3732 | 
3733 | .slideInDown {
3734 |   -webkit-animation-name: slideInDown;
3735 |   animation-name: slideInDown;
3736 | }
3737 | 
3738 | @-webkit-keyframes slideInLeft {
3739 |   from {
3740 |     -webkit-transform: translate3d(-100%, 0, 0);
3741 |     transform: translate3d(-100%, 0, 0);
3742 |     visibility: visible;
3743 |   }
3744 | 
3745 |   to {
3746 |     -webkit-transform: translate3d(0, 0, 0);
3747 |     transform: translate3d(0, 0, 0);
3748 |   }
3749 | }
3750 | 
3751 | @keyframes slideInLeft {
3752 |   from {
3753 |     -webkit-transform: translate3d(-100%, 0, 0);
3754 |     transform: translate3d(-100%, 0, 0);
3755 |     visibility: visible;
3756 |   }
3757 | 
3758 |   to {
3759 |     -webkit-transform: translate3d(0, 0, 0);
3760 |     transform: translate3d(0, 0, 0);
3761 |   }
3762 | }
3763 | 
3764 | .slideInLeft {
3765 |   -webkit-animation-name: slideInLeft;
3766 |   animation-name: slideInLeft;
3767 | }
3768 | 
3769 | @-webkit-keyframes slideInRight {
3770 |   from {
3771 |     -webkit-transform: translate3d(100%, 0, 0);
3772 |     transform: translate3d(100%, 0, 0);
3773 |     visibility: visible;
3774 |   }
3775 | 
3776 |   to {
3777 |     -webkit-transform: translate3d(0, 0, 0);
3778 |     transform: translate3d(0, 0, 0);
3779 |   }
3780 | }
3781 | 
3782 | @keyframes slideInRight {
3783 |   from {
3784 |     -webkit-transform: translate3d(100%, 0, 0);
3785 |     transform: translate3d(100%, 0, 0);
3786 |     visibility: visible;
3787 |   }
3788 | 
3789 |   to {
3790 |     -webkit-transform: translate3d(0, 0, 0);
3791 |     transform: translate3d(0, 0, 0);
3792 |   }
3793 | }
3794 | 
3795 | .slideInRight {
3796 |   -webkit-animation-name: slideInRight;
3797 |   animation-name: slideInRight;
3798 | }
3799 | 
3800 | @-webkit-keyframes slideInUp {
3801 |   from {
3802 |     -webkit-transform: translate3d(0, 100%, 0);
3803 |     transform: translate3d(0, 100%, 0);
3804 |     visibility: visible;
3805 |   }
3806 | 
3807 |   to {
3808 |     -webkit-transform: translate3d(0, 0, 0);
3809 |     transform: translate3d(0, 0, 0);
3810 |   }
3811 | }
3812 | 
3813 | @keyframes slideInUp {
3814 |   from {
3815 |     -webkit-transform: translate3d(0, 100%, 0);
3816 |     transform: translate3d(0, 100%, 0);
3817 |     visibility: visible;
3818 |   }
3819 | 
3820 |   to {
3821 |     -webkit-transform: translate3d(0, 0, 0);
3822 |     transform: translate3d(0, 0, 0);
3823 |   }
3824 | }
3825 | 
3826 | .slideInUp {
3827 |   -webkit-animation-name: slideInUp;
3828 |   animation-name: slideInUp;
3829 | }
3830 | 
3831 | @-webkit-keyframes slideOutDown {
3832 |   from {
3833 |     -webkit-transform: translate3d(0, 0, 0);
3834 |     transform: translate3d(0, 0, 0);
3835 |   }
3836 | 
3837 |   to {
3838 |     visibility: hidden;
3839 |     -webkit-transform: translate3d(0, 100%, 0);
3840 |     transform: translate3d(0, 100%, 0);
3841 |   }
3842 | }
3843 | 
3844 | @keyframes slideOutDown {
3845 |   from {
3846 |     -webkit-transform: translate3d(0, 0, 0);
3847 |     transform: translate3d(0, 0, 0);
3848 |   }
3849 | 
3850 |   to {
3851 |     visibility: hidden;
3852 |     -webkit-transform: translate3d(0, 100%, 0);
3853 |     transform: translate3d(0, 100%, 0);
3854 |   }
3855 | }
3856 | 
3857 | .slideOutDown {
3858 |   -webkit-animation-name: slideOutDown;
3859 |   animation-name: slideOutDown;
3860 | }
3861 | 
3862 | @-webkit-keyframes slideOutLeft {
3863 |   from {
3864 |     -webkit-transform: translate3d(0, 0, 0);
3865 |     transform: translate3d(0, 0, 0);
3866 |   }
3867 | 
3868 |   to {
3869 |     visibility: hidden;
3870 |     -webkit-transform: translate3d(-100%, 0, 0);
3871 |     transform: translate3d(-100%, 0, 0);
3872 |   }
3873 | }
3874 | 
3875 | @keyframes slideOutLeft {
3876 |   from {
3877 |     -webkit-transform: translate3d(0, 0, 0);
3878 |     transform: translate3d(0, 0, 0);
3879 |   }
3880 | 
3881 |   to {
3882 |     visibility: hidden;
3883 |     -webkit-transform: translate3d(-100%, 0, 0);
3884 |     transform: translate3d(-100%, 0, 0);
3885 |   }
3886 | }
3887 | 
3888 | .slideOutLeft {
3889 |   -webkit-animation-name: slideOutLeft;
3890 |   animation-name: slideOutLeft;
3891 | }
3892 | 
3893 | @-webkit-keyframes slideOutRight {
3894 |   from {
3895 |     -webkit-transform: translate3d(0, 0, 0);
3896 |     transform: translate3d(0, 0, 0);
3897 |   }
3898 | 
3899 |   to {
3900 |     visibility: hidden;
3901 |     -webkit-transform: translate3d(100%, 0, 0);
3902 |     transform: translate3d(100%, 0, 0);
3903 |   }
3904 | }
3905 | 
3906 | @keyframes slideOutRight {
3907 |   from {
3908 |     -webkit-transform: translate3d(0, 0, 0);
3909 |     transform: translate3d(0, 0, 0);
3910 |   }
3911 | 
3912 |   to {
3913 |     visibility: hidden;
3914 |     -webkit-transform: translate3d(100%, 0, 0);
3915 |     transform: translate3d(100%, 0, 0);
3916 |   }
3917 | }
3918 | 
3919 | .slideOutRight {
3920 |   -webkit-animation-name: slideOutRight;
3921 |   animation-name: slideOutRight;
3922 | }
3923 | 
3924 | @-webkit-keyframes slideOutUp {
3925 |   from {
3926 |     -webkit-transform: translate3d(0, 0, 0);
3927 |     transform: translate3d(0, 0, 0);
3928 |   }
3929 | 
3930 |   to {
3931 |     visibility: hidden;
3932 |     -webkit-transform: translate3d(0, -100%, 0);
3933 |     transform: translate3d(0, -100%, 0);
3934 |   }
3935 | }
3936 | 
3937 | @keyframes slideOutUp {
3938 |   from {
3939 |     -webkit-transform: translate3d(0, 0, 0);
3940 |     transform: translate3d(0, 0, 0);
3941 |   }
3942 | 
3943 |   to {
3944 |     visibility: hidden;
3945 |     -webkit-transform: translate3d(0, -100%, 0);
3946 |     transform: translate3d(0, -100%, 0);
3947 |   }
3948 | }
3949 | 
3950 | .slideOutUp {
3951 |   -webkit-animation-name: slideOutUp;
3952 |   animation-name: slideOutUp;
3953 | }
3954 | 
3955 | .animated {
3956 |   -webkit-animation-duration: 1s;
3957 |   animation-duration: 1s;
3958 |   -webkit-animation-fill-mode: both;
3959 |   animation-fill-mode: both;
3960 | }
3961 | 
3962 | .animated.infinite {
3963 |   -webkit-animation-iteration-count: infinite;
3964 |   animation-iteration-count: infinite;
3965 | }
3966 | 
3967 | .animated.delay-1s {
3968 |   -webkit-animation-delay: 1s;
3969 |   animation-delay: 1s;
3970 | }
3971 | 
3972 | .animated.delay-2s {
3973 |   -webkit-animation-delay: 2s;
3974 |   animation-delay: 2s;
3975 | }
3976 | 
3977 | .animated.delay-3s {
3978 |   -webkit-animation-delay: 3s;
3979 |   animation-delay: 3s;
3980 | }
3981 | 
3982 | .animated.delay-4s {
3983 |   -webkit-animation-delay: 4s;
3984 |   animation-delay: 4s;
3985 | }
3986 | 
3987 | .animated.delay-5s {
3988 |   -webkit-animation-delay: 5s;
3989 |   animation-delay: 5s;
3990 | }
3991 | 
3992 | .animated.fast {
3993 |   -webkit-animation-duration: 800ms;
3994 |   animation-duration: 800ms;
3995 | }
3996 | 
3997 | .animated.faster {
3998 |   -webkit-animation-duration: 500ms;
3999 |   animation-duration: 500ms;
4000 | }
4001 | 
4002 | .animated.slow {
4003 |   -webkit-animation-duration: 2s;
4004 |   animation-duration: 2s;
4005 | }
4006 | 
4007 | .animated.slower {
4008 |   -webkit-animation-duration: 3s;
4009 |   animation-duration: 3s;
4010 | }
4011 | 
4012 | @media (print), (prefers-reduced-motion) {
4013 |   .animated {
4014 |     -webkit-animation: unset !important;
4015 |     animation: unset !important;
4016 |     -webkit-transition: none !important;
4017 |     transition: none !important;
4018 |   }
4019 | }
4020 | 


--------------------------------------------------------------------------------
/frontend/src/DemoApp.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | * Demo App
  3 | */
  4 | 
  5 | import React, { Component } from 'react'
  6 | import logo from './images/logo.png'
  7 | import './DemoApp.css'
  8 | 
  9 | const INITIAL_API_REQUESTS = 50
 10 | const INITIAL_STATUS = 'Ready for testing!'
 11 | 
 12 | /*
 13 | * Class – DemoApp
 14 | */
 15 | 
 16 | class DemoApp extends Component {
 17 | 
 18 |   /*
 19 |   * Constructor
 20 |   */
 21 | 
 22 |   constructor(props) {
 23 |     super(props)
 24 | 
 25 |     this.state = {}
 26 |     this.state.visible = {}
 27 |     this.state.visible.admin = false
 28 |     this.state.visible.success = false
 29 |     this.state.admin = {}
 30 |     this.state.admin.status = INITIAL_STATUS
 31 |     this.state.admin.invocations = INITIAL_API_REQUESTS
 32 |     this.state.admin.url = null
 33 | 
 34 |     // Refs
 35 |     this.refFormName = React.createRef()
 36 |     this.refFormEmail = React.createRef()
 37 |     this.refInputUrl = React.createRef()
 38 |     this.refInputInvocations = React.createRef()
 39 | 
 40 |     // Binders
 41 |     this.submitForm = this.submitForm.bind(this)
 42 |     this.toggleAdmin = this.toggleAdmin.bind(this)
 43 |     this.updateApi = this.updateApi.bind(this)
 44 |     this.generateInvocations = this.generateInvocations.bind(this)
 45 |     this.generateRandomError = this.generateRandomError.bind(this)
 46 |     this.generateDurationError = this.generateDurationError.bind(this)
 47 |     this.generateTimeoutError = this.generateTimeoutError.bind(this)
 48 |   }
 49 | 
 50 |   /**
 51 |    * Component Did Mount
 52 |    */
 53 | 
 54 |   componentDidMount() {
 55 |     const self = this
 56 |     // Get Global State from local storage
 57 |     let data = localStorage.getItem('demoapp')
 58 |     data = data ? JSON.parse(data) : {}
 59 |     this.setState({ admin: { ...this.state.admin, ...{ url: data.url }}}, () => {
 60 |       console.log('Serverless Framework Demo App Initialized')
 61 |       console.log(this.state)
 62 | 
 63 |       // Initial Session Status
 64 |       let newState = {
 65 |         status: INITIAL_STATUS,
 66 |         invocations: INITIAL_API_REQUESTS,
 67 |       }
 68 |       if (!this.state.admin.url) {
 69 |         newState.status = 'Please insert the URL of your Form\'s API in the field below.'
 70 |       }
 71 | 
 72 |       this.setState({ admin: { ...self.state.admin, ...newState }})
 73 |     })
 74 |   }
 75 | 
 76 |   /**
 77 |    * Toggle Admin
 78 |    */
 79 | 
 80 |   toggleAdmin() {
 81 |     let newState = { admin: !this.state.visible.admin }
 82 |     this.setState({ visible: { ...this.state.visible, ...newState }})
 83 |   }
 84 | 
 85 |   /**
 86 |    * Set Status
 87 |    */
 88 | 
 89 |   setStatus(status) {
 90 |     const self = this
 91 |     clearTimeout(this.timeout)
 92 |     this.setState({ admin: { ...this.state.admin, ...{ status }}})
 93 |     this.timeout = setTimeout(() =>{
 94 |       self.setState({ admin: { ...this.state.admin, ...{ status: `Ready for testing!` }}})
 95 |     }, 6000)
 96 |   }
 97 | 
 98 |   /**
 99 |    * Submit Form
100 |    */
101 | 
102 |   submitForm(event) {
103 | 
104 |     event.preventDefault()
105 | 
106 |     const self = this
107 |     const name = this.refFormName.current.value
108 |     const email = this.refFormEmail.current.value
109 | 
110 |     if (!name || name === '' || !email || email === '') {
111 |       alert('Form fields must be filled in')
112 |       return
113 |     }
114 | 
115 |     const callApi = () => {
116 |       return fetch(this.state.admin.url, {
117 |         method: 'POST',
118 |         mode: 'cors',
119 |         headers: {
120 |             'Content-Type': 'application/json',
121 |         },
122 |         body: JSON.stringify({ name, email }),
123 |       })
124 |     }
125 | 
126 |     return callApi()
127 |     .then(() => {
128 |       self.setState({ visible: { ...this.state.visible, ...{ success: true }}})
129 |     })
130 |   }
131 | 
132 |   /**
133 |    * Update API
134 |    */
135 | 
136 |   updateApi(event) {
137 | 
138 |     event.preventDefault()
139 | 
140 |     const self = this
141 |     let url = this.refInputUrl.current.value
142 |     url = url.trim() || null
143 | 
144 |     function validURL(str) {
145 |       var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
146 |         '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
147 |         '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
148 |         '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
149 |         '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
150 |         '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
151 |       return !!pattern.test(str);
152 |     }
153 | 
154 |     if (!validURL(url)) {
155 |       alert(`This is not a valid URL: ${url || '(Field is blank)'}`)
156 |       return
157 |     }
158 | 
159 |     const newState = { url: url }
160 |     this.setState({
161 |       admin: { ...this.state.admin, ...newState }
162 |     }, () => {
163 |       localStorage.setItem('demoapp', JSON.stringify({ url }))
164 |       self.setStatus('API URL successfully updated!')
165 |     })
166 |   }
167 | 
168 |   /**
169 |    * Generate Invocations
170 |    */
171 | 
172 |   generateInvocations(event) {
173 | 
174 |     event.preventDefault()
175 | 
176 |     const self = this
177 | 
178 |     let invocations = this.refInputInvocations.current.value || this.state.admin.invocations
179 |     invocations = parseInt(invocations) || 0
180 | 
181 |     if (invocations > 999) {
182 |       //eslint-disable-next-line
183 |       const r = confirm(`\nThis will generate ${invocations} API requests.  Are you sure you want to do this?\n`)
184 |       if (!r) return
185 |     }
186 | 
187 |     // Call API Function
188 |     const callApi = () => {
189 |       return fetch(this.state.admin.url, {
190 |         method: 'POST',
191 |         mode: 'cors',
192 |         headers: {
193 |             'Content-Type': 'application/json',
194 |         },
195 |         body: JSON.stringify({
196 |           name: 'Sample Invocation',
197 |           email: 'sample@invocations.com'
198 |         }),
199 |       })
200 |     }
201 | 
202 |     // Runner Function
203 |     const runner = async (cb) => {
204 |       let array = []
205 |       for (let i = 0; i <= invocations; i++) { array.push(i) }
206 |       for (const item of array) {
207 |         await callApi()
208 |         self.setStatus(`Performing API request ${item}/${invocations}...`)
209 |       }
210 |       if (cb) return cb()
211 |     }
212 | 
213 |     runner(() => {
214 |       self.setStatus(`Successfully completed ${invocations} requests!`)
215 |     })
216 |   }
217 | 
218 |   /**
219 |    * Generate Random Error
220 |    */
221 | 
222 |   generateRandomError(event) {
223 | 
224 |     event.preventDefault()
225 | 
226 |     const self = this
227 | 
228 |     // Call API Function
229 |     const callApi = () => {
230 |       return fetch(`${this.state.admin.url}?error=true`, {
231 |         method: 'POST',
232 |         mode: 'cors',
233 |         headers: {
234 |             'Content-Type': 'application/json',
235 |         },
236 |         body: JSON.stringify({ message: 'random error'}),
237 |       })
238 |     }
239 | 
240 |     // Runner Function
241 |     const runner = async (cb) => {
242 |       try { await callApi() }
243 |       catch (error) { console.log(error) }
244 |       self.setStatus(`Generating a random function error...`)
245 |       if (cb) return cb()
246 |     }
247 | 
248 |     runner(() => {
249 |       self.setStatus(`Successfully generated a random function error!`)
250 |     })
251 |   }
252 | 
253 |   /**
254 |    * Generate Duration Error
255 |    */
256 | 
257 |   generateDurationError(event) {
258 | 
259 |     event.preventDefault()
260 | 
261 |     const self = this
262 | 
263 |     // Call API Function
264 |     const callApi = () => {
265 |       return fetch(`${this.state.admin.url}?duration=true`, {
266 |         method: 'POST',
267 |         mode: 'cors',
268 |         headers: {
269 |             'Content-Type': 'application/json',
270 |         },
271 |         body: JSON.stringify({ message: 'duration error' }),
272 |       })
273 |     }
274 | 
275 |     // Runner Function
276 |     const runner = async (cb) => {
277 |       try { await callApi() }
278 |       catch (error) { console.log(error) }
279 |       self.setStatus(`Generating a random function error...`)
280 |       if (cb) return cb()
281 |     }
282 | 
283 |     runner(() => {
284 |       self.setStatus(`Successfully generated a duration error!`)
285 |     })
286 |   }
287 | 
288 |   /**
289 |    * Generate Timeout Error
290 |    */
291 | 
292 |   generateTimeoutError(event) {
293 | 
294 |     event.preventDefault()
295 | 
296 |     const self = this
297 | 
298 |     // Call API Function
299 |     const callApi = () => {
300 |       return fetch(`${this.state.admin.url}?timeout=true`, {
301 |         method: 'POST',
302 |         mode: 'cors',
303 |         headers: {
304 |             'Content-Type': 'application/json',
305 |         },
306 |         body: JSON.stringify({ message: 'timeout error' }),
307 |       })
308 |     }
309 | 
310 |     // Runner Function
311 |     const runner = async (cb) => {
312 |       try { await callApi() }
313 |       catch (error) { console.log(error) }
314 |       self.setStatus(`Generating a random function error...`)
315 |       if (cb) return cb()
316 |     }
317 | 
318 |     runner(() => {
319 |       self.setStatus(`Successfully generated a timeout error!`)
320 |     })
321 |   }
322 | 
323 |   /*
324 |   * Render
325 |   */
326 | 
327 |   render() {
328 | 
329 |     return (
330 |       <div className='DemoApp'>
331 | 
332 |         {
333 |           /*
334 |            * DemoApp Admin Menu
335 |           */
336 |         }
337 | 
338 |         <section className={`DemoApp-admin ${this.state.visible.admin ? `visible` : ``}`}>
339 | 
340 |           <div
341 |             className='admin-close'
342 |             onClick={this.toggleAdmin}>
343 |             x
344 |           </div>
345 | 
346 |           <div className='admin-logo'>
347 |             <img src={logo} alt="logo" />
348 |             Serverless Framework - Demo Utilities
349 |           </div>
350 | 
351 |           <div className='admin-section'
352 |             style={{ display: `${ this.state.admin.status ? 'flex' : 'none' }`}}>
353 |             <div className='admin-label'>
354 |               Status
355 |             </div>
356 |             <p className='admin-status'>
357 |               {this.state.admin.status}
358 |             </p>
359 |           </div>
360 | 
361 |           <div className='admin-section'>
362 |             <div className='admin-label'>
363 |               Form Submit URL
364 |             </div>
365 |             <form className='admin-section-field'>
366 |               <input
367 |                 type='text'
368 |                 className='admin-input'
369 |                 placeholder={this.state.admin.url || 'Enter the formSubmit API URL here...'}
370 |                 ref={this.refInputUrl}
371 |               />
372 |               <input
373 |                 type='submit'
374 |                 className='admin-button'
375 |                 value='Set'
376 |                 onClick={this.updateApi}
377 |                 >
378 |               </input>
379 |             </form>
380 |             <div className='admin-input-description'>
381 |               Enter the formSubmit function's API URL returned upon deployment with the Framework.
382 |             </div>
383 |           </div>
384 | 
385 |           <div className='admin-section'>
386 |             <div className='admin-label'>
387 |               Generate A Sample Number Of API Requests
388 |             </div>
389 |             <form className='admin-section-field'>
390 |               <input
391 |                 type='number'
392 |                 className='admin-input'
393 |                 placeholder={this.state.admin.invocations}
394 |                 ref={this.refInputInvocations}
395 |               />
396 |               <input
397 |                 type='submit'
398 |                 className='admin-button'
399 |                 value='Generate'
400 |                 onClick={this.generateInvocations}
401 |                 >
402 |               </input>
403 |             </form>
404 |             <div className='admin-input-description'>
405 |               This generates fake form submissions to give you sample invocation data.
406 |             </div>
407 |           </div>
408 | 
409 |           <div className='admin-section'>
410 |             <div className='admin-section-general'>
411 |               <div className='admin-section-general-description'>
412 |                 <div className='admin-label'>
413 |                   Generate A New Function Code Error
414 |                 </div>
415 |                 <div>
416 |                   This generates a new Function Code Error.
417 |                 </div>
418 |               </div>
419 |               <div className='admin-section-general-button'>
420 |                 <div
421 |                   className='admin-button'
422 |                   onClick={this.generateRandomError}>Generate</div>
423 |               </div>
424 |             </div>
425 |           </div>
426 | 
427 |           <div className='admin-section'>
428 |             <div className='admin-section-general'>
429 |               <div className='admin-section-general-description'>
430 |                 <div className='admin-label'>
431 |                   Generate An Unusual Duration
432 |                 </div>
433 |                 <div>
434 |                   This makes the function run for a long time and generates an "unusual duration" and "appraoching timeout" error.
435 |                 </div>
436 |               </div>
437 |               <div className='admin-section-general-button'>
438 |                 <div className='admin-button'
439 |                 onClick={this.generateDurationError}>Generate</div>
440 |               </div>
441 |             </div>
442 |           </div>
443 | 
444 |           <div className='admin-section'>
445 |             <div className='admin-section-general'>
446 |               <div className='admin-section-general-description'>
447 |                 <div className='admin-label'>
448 |                   Generate A Timeout Error
449 |                 </div>
450 |                 <div>
451 |                   This makes the function run for longer than the set timeout.
452 |                 </div>
453 |               </div>
454 |               <div className='admin-section-general-button'>
455 |                 <div className='admin-button'
456 |                 onClick={this.generateTimeoutError}>Generate</div>
457 |               </div>
458 |             </div>
459 |           </div>
460 | 
461 | 
462 |         </section>
463 | 
464 |         {
465 |           /*
466 |            * DemoApp Content
467 |           */
468 |         }
469 | 
470 |         <section className="DemoApp-content">
471 | 
472 |           <div className="admin-link animated fadeIn" onClick={this.toggleAdmin}>
473 |             Demo Utilities
474 |           </div>
475 | 
476 |           <div className='container animated zoomIn'>
477 | 
478 |             <div className='form-header' style={{ display: `${ this.state.visible.success ? 'none': 'flex' }`}}>
479 |               Serverless Email Sign-Up Form
480 |             </div>
481 | 
482 |             <form className='form' style={{ display: `${ this.state.visible.success ? 'none': 'flex' }`}}>
483 |               <div className='form-field-label'>
484 |                 Full Name
485 |               </div>
486 |               <input
487 |                 type='text'
488 |                 className='form-field-input'
489 |                 placeholder='Allison Bensely'
490 |                 ref={this.refFormName}>
491 |               </input>
492 |               <div className='form-field-label'>
493 |                 Email
494 |               </div>
495 |               <input
496 |                 type='email'
497 |                 className='form-field-input'
498 |                 placeholder='allison.bensely@gmail.com'
499 |                 ref={this.refFormEmail}>
500 |               </input>
501 |               <div className='form-field-button-container'>
502 |                 <input type='submit' className='form-field-button' onClick={this.submitForm}></input>
503 |               </div>
504 |             </form>
505 | 
506 |             <div className='success animated fadeInUp' style={{ display: `${ this.state.visible.success ? 'flex': 'none' }`}}>
507 |               Thank you for your submission!
508 |             </div>
509 | 
510 |           </div>
511 | 
512 |         </section>
513 |       </div>
514 |     )
515 |   }
516 | }
517 | 
518 | export default DemoApp
519 | 


--------------------------------------------------------------------------------
/frontend/src/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/serverless/workshop/f4cc42cdd9f0865347dbfa42f67ab0beb56e3edc/frontend/src/images/logo.png


--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 5 |     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 6 |     sans-serif;
 7 |   -webkit-font-smoothing: antialiased;
 8 |   -moz-osx-font-smoothing: grayscale;
 9 | }
10 | 
11 | code {
12 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
13 |     monospace;
14 | }
15 | 


--------------------------------------------------------------------------------
/frontend/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import DemoApp from './DemoApp'
4 | import './index.css'
5 | 
6 | window.demoapp = {}
7 | 
8 | ReactDOM.render(<DemoApp />, document.getElementById('root'))
9 | 


--------------------------------------------------------------------------------